-->
Beranda  ›  Bahasa Pemrograman  ›  CSS  ›  Teknologi Informasi

Clear CSS | Kita Ngoding CSS #15 |

Selasa, 10 Agustus 2021 Add Comment Edit

Clear CSS.- Hari ini admin ingin membahas tentang Clear CSS. ini merupakan Tutorial CSS kita yang ke-15. 

Properti Clear Pada CSS dapat kalian menfaatkan untuk merapikan tampilan website yang berantakan akibat dari property float pada css. Jadi ini adalah lanjutan dari pembahasan kita sebelumnya yaitu Float CSS.

Clear CSS |Kita Ngoding CSS#15|

Bagi kalian yang belum mengikuti tutorial sebelumnya, admin harap kalian mengikutinya terlebih dahulu sebelum mengikuti artikel ini, dikarenakan admin akan menggunakan contoh website yang kita buat sebelumnya.

Perhatikan Contoh website yang kita buat sebelumnya, namun dengan sedikit modifikasi :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            /*height: 600px; <- Jangan atur tinggi dari container
 */
            margin: auto;
            border: 1px solid ;
            padding: 5px;
        }
        .kiri{
            width: 150px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .dua{
            background-color: blue;
            float: left;
            margin-left: 10px;
        }
        .tengah{
            width: 300px;
            height: 500px;
            background-color: blue;
            float: left;
        }
        .kanan{
            width: 150px;
            height: 500px;
            background-color: green;
            float: left;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Multi Colomn</h1>
        <div class="kiri"></div>
        <div class="tengah"></div>
        <div class="kanan"></div>
    </div>
</body>
</html>

Output :

Perhatikan pada bagian atas dari hasil output diatas terlihat kotak warna yang kita buat menggunakan div, keluar dari container bukan?.

Kenapa pada artikel sebelumnya kotak warna tersebut masih dalam container sekarang tidak? Karena di sebelumnya kita sudah tetapkan height: 600px; sekarang kita tidak tetapkan tingginya (height) karena admin ingin tingginya mengikuti tinggi dari kotak warna yang kita buat.

Fungsi Properti Clear Pada CSS

Seperti yang telah admin bocorkan diatas, bahwa fungsi dari property clear ini adalah untuk menghapus nilai float sebelumnya untuk merapikan tampilan website yang berantakan akibat dari pemberian property float.

Adapun nilai (value) dari property clear yaitu :

  • left : untuk menghapus nilai float dengan nilai left.
  • right : untuk menghapus nilai float dengan nilai right.
  • both : untuk menghapus nilai float dengan nilai left dan right.

Sekarang, bagaimana cara merapikan website yang berantakan diatas?

Ada 2 cara yang akan admin tunjukan pada artikel ini yaitu :

Cara 1.

kita buat kode css baru dengan nama kelas “clear” (kalian boleh berikan nama yang berbeda). Seperti dibawah :

        .clear{
            clear: left;
        }

Karena nilai property float dari kelas css “.kiri”, “.tengah”, “.kanan” bernilai “left” maka nilai dari property clear adalah “left” seperti yang telah admin jelaskan diatas.

kemudian kalian tambahkan div pada html dengan nama kelas sesuai dengan nama kelas css yang kalian buat tadi.

    <div class="container">
        <h1>Multi Colomn</h1>
        <div class="kiri"></div>
        <div class="tengah"></div>
        <div class="kanan"></div>
        <!-- -->
        <div class="clear"></div> <!--div yang ditambahkan-->
    </div>

Setelah itu kalian buka hasil dari kode yang kalian ubah diatas pada browser kalian. Maka seharusnya kotak warna yang kalian buat sudah berada didalam container. Namun jika tidak, berarti cara kalian ada yang keliru.

Cara 2.

Menggunakan Teknik Micro Clearfix yang diciptakan oleh orang bernama Nicolas Gallagher. Kalian kunjungi website orang tersebut disini http://nicolasgallagher.com/micro-clearfix-hack/ kemudian kalian cari code css seperti ini :

/**

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    contenteditable attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that are clearfixed.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */

.cf:before,

.cf:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}

.cf:after {

    clear: both;

}

/**

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */

.cf {

    *zoom: 1;

}

Kalian dapat mengkopi paste kode tersebut ke halaman website yang kalian buat secara langsung kemudian mengubah nilai clear sesuai dengan kebutuhan. Seperti contoh admin dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 600px;
            /*height: 600px; Jangan Atur Tinggi Dari continer*/
            margin: auto;
            border: 1px solid ;
            padding: 5px;
        }
        .kiri{
            width: 150px;
            height: 500px;
            background-color: red;
            float: left;
        }
        .dua{
            background-color: blue;
            float: left;
            margin-left: 10px;
        }
        .tengah{
            width: 300px;
            height: 500px;
            background-color: blue;
            float: left;
        }
        .kanan{
            width: 150px;
            height: 500px;
            background-color: green;
            float: left;
        }
        /**
        * For modern browsers
        * 1. The space content is one way to avoid an Opera bug when the
        *    contenteditable attribute is included anywhere else in the document.
        *    Otherwise it causes space to appear at the top and bottom of elements
        *    that are clearfixed.
        * 2. The use of `table` rather than `block` is only necessary if using
        *    `:before` to contain the top-margins of child elements.
        */
        .cf:before,
        .cf:after {
            content: " "; /* 1 */
            display: table; /* 2 */
        }
        .cf:after {
            clear: left; /*Perhatikan Nilai Clear Disini*/
        }
        /**
        * For IE 6/7 only
        * Include this rule to trigger hasLayout and contain floats.
        */
        .cf {
            *zoom: 1;
        }
    </style>
</head>
<body>
    <div class="container cf"> <!--Jangan Lupa untuk menambahkan kelas dari 
css clear yang kita buat. dalam hal ini admin menggunakan nama "cf" 
bawaan dari website resmi-->
        <h1>Multi-Colomns</h1>
        <div class="kiri"></div>
        <div class="tengah"></div>
        <div class="kanan"></div>
    </div>
</body>
</html>

Maka Outputnya Seperti Berikut :

Cara yang kedua ini memang terlihat lebih panjang dari cara yang pertama, namun ini adalah cara terbaik. Salah satu alasannya adalah kita tidak perlu menambahkan div pada kode html untuk memanggil kelas clear seperti cara pertama, karena div tersebut dianggap sebagai elemen kosong yang tidak seharusnya ada pada website.

Dan cara yang kedua ini, dapat menampilkan website yang kita buat secara normal di semua browser. Karena jika menggunakan cara pertama, ada beberapa browser yang tidak menampilkan website kita dengan cara normal.

Supaya lebih memantapkan pemahaman kalian tentang CSS silahkan kunjungi artikel kami yang lainnya. Linknya admin taruh dibawah ini :

Pengertian CSS dan Fungsinya | Kita Ngoding CSS #01 |

Syntax CSS | Kita Ngoding CSS #02 |

Selector Pada CSS | Kita Ngoding CSS #03 |

Cara Menggunakan CSS Di HTML | Kita Ngoding CSS #04 |

Membuat Komentar Di CSS | Kita Ngoding CSS #05 |

Code Warna Dalam CSS | Kita Ngoding CSS #06 |

Kode Background CSS | Kita Ngoding CSS #07 |

Cara Membuat Border Di CSS | Kita Ngoding CSS #08 |

Magin Dan Padding Pada CSS | Kita Ngoding CSS #09 |

CSS Height Dan Width | Kita Ngoding CSS #10 |

Box Model CSS | Kita Ngoding CSS #11 |

Reset CSS | Kita Ngoding CSS #12 |

Dimensi Dan Display Pada CSS |Kita Ngoding CSS#13|

Float CSS | Kita Ngoding CSS#14|

Clear CSS |Kita Ngoding CSS#15|

Admin rasa cukup untuk pertemuan kita pada kesemptan kali ini, semoga dapat membantu kalian dalam menyelesaikan tugas, atau pekerjaan kalian terkait dengan CSS Clear.

Sampai ketemu lagi pada tulisan admin berikutnya.

Wassalamualekum wr wb.

0 Response to "Clear CSS | Kita Ngoding CSS #15 |"

Posting Komentar

Langganan: Posting Komentar (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close