CSS: Membersihkan Float Tanpa Bergantung Pada Elemen Berikutnya

Aturan CSS float: left; sangat berguna ketika kita ingin menyusun elemen ke dalam kolom-kolom. Untuk mengembalikan elemen berikutnya ke baris baru, kita menggunakan aturan CSS clear: both; pada elemen berikutnya. Jika tidak diberi clear: both; maka elemen berikutnya akan mengikuti di sebelahnya, dan tata letak jadi berantakan. Seperti contoh berikut ini.

HTML

<div class="container">
    <div class="col">
        <p><b>Candy Halvah</b></p>
        Soufflé sweet roll candy halvah brownie gummies cookie jelly beans. Pastry sweet jelly cake dessert. Soufflé oat cake cake dessert tootsie roll brownie sweet roll marzipan tiramisu. Topping candy biscuit toffee jelly beans muffin cupcake gingerbread muffin.
    </div>
    <div class="col">
        <p><b>Powder Candy Canes</b></p>
        Jelly-o cheesecake chocolate bar. Powder candy canes topping muffin candy donut. Cake topping tart wafer pudding sweet. Caramels gummies dessert cake dessert lollipop chocolate bar.
    </div>
</div>
<div class="notice">
    Sesame snaps dessert cheesecake macaroon muffin. Cotton candy lollipop topping carrot cake cheesecake dessert candy jelly. Chocolate cake jelly-o chocolate jujubes dessert jujubes danish carrot cake bonbon. Liquorice icing gingerbread tart pastry tootsie roll.
</div>

CSS

.container {
    background: #ffe5cc;
    color: #000;
    text-align: justify;
}

.col {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 10px;
}

.next {
    clear: both;
    text-align: justify;
    padding: 10px;
    background: #ffffcc;
    color: #000;
}

Dengan clear: both; pada class .notice (CSS baris 15)

Candy Halvah

Soufflé sweet roll candy halvah brownie gummies cookie jelly beans. Pastry sweet jelly cake dessert. Soufflé oat cake cake dessert tootsie roll brownie sweet roll marzipan tiramisu. Topping candy biscuit toffee jelly beans muffin cupcake gingerbread muffin.

Powder Candy Canes

Jelly-o cheesecake chocolate bar. Powder candy canes topping muffin candy donut. Cake topping tart wafer pudding sweet. Caramels gummies dessert cake dessert lollipop chocolate bar.

Notice: Sesame snaps dessert cheesecake macaroon muffin. Cotton candy lollipop topping carrot cake cheesecake dessert candy jelly. Chocolate cake jelly-o chocolate jujubes dessert jujubes danish carrot cake bonbon. Liquorice icing gingerbread tart pastry tootsie roll.

Tanpa clear: both; pada class .notice

Candy Halvah

Soufflé sweet roll candy halvah brownie gummies cookie jelly beans. Pastry sweet jelly cake dessert. Soufflé oat cake cake dessert tootsie roll brownie sweet roll marzipan tiramisu. Topping candy biscuit toffee jelly beans muffin cupcake gingerbread muffin.

Powder Candy Canes

Jelly-o cheesecake chocolate bar. Powder candy canes topping muffin candy donut. Cake topping tart wafer pudding sweet. Caramels gummies dessert cake dessert lollipop chocolate bar.

Notice: Sesame snaps dessert cheesecake macaroon muffin. Cotton candy lollipop topping carrot cake cheesecake dessert candy jelly. Chocolate cake jelly-o chocolate jujubes dessert jujubes danish carrot cake bonbon. Liquorice icing gingerbread tart pastry tootsie roll.

Solusi dengan tambahan <div>

Masalahnya, kita mesti tahu elemen apa yang mengikutinya (untuk contoh di atas adalah div.notice), supaya kita bisa menambahkan aturan clear: both; ini ke elemen tersebut. Alternatifnya, adalah dengan menambahkan satu <div> setelah kolom-kolom itu yang berisikan CSS clear: both; misalnya seperti ini.

HTML

<div class="container">
    <div class="col">
        <p><b>Candy Halvah</b></p>
        Soufflé sweet roll candy halvah brownie gummies cookie jelly beans. Pastry sweet jelly cake dessert. Soufflé oat cake cake dessert tootsie roll brownie sweet roll marzipan tiramisu. Topping candy biscuit toffee jelly beans muffin cupcake gingerbread muffin.
    </div>
    <div class="col">
        <p><b>Powder Candy Canes</b></p>
        Jelly-o cheesecake chocolate bar. Powder candy canes topping muffin candy donut. Cake topping tart wafer pudding sweet. Caramels gummies dessert cake dessert lollipop chocolate bar.
    </div>
</div>
<div class="clear"></div>
<div class="notice">
    Sesame snaps dessert cheesecake macaroon muffin. Cotton candy lollipop topping carrot cake cheesecake dessert candy jelly. Chocolate cake jelly-o chocolate jujubes dessert jujubes danish carrot cake bonbon. Liquorice icing gingerbread tart pastry tootsie roll.
</div>

CSS

.clear {
    clear: both;
}

Solusi dengan pseudo-element CSS

Kode di atas masih bisa dibuat lebih rapi lagi dengan hanya menggunakan CSS tanpa perlu tambahan elemen HTML yang tidak terkait dengan konten. Caranya adalah dengan memanfaatkan pseudo-element after.

.container:after {
    display: block;
    content: '';
    clear: both;
}

Potongan kode CSS di atas akan menyisipkan elemen semu pada akhir kontainer, yang berisikan aturan CSS clear: both;. Pseudo-element before dan after hanya akan muncul jika memiliki content. Karena itu, kita perlu set content sekalipun hanya string kosong saja. Display untuk before dan after pada awalnya adalah inline. Supaya berperan seperti <div>, maka kita set display: block;.

Dengan begini, kolom-kolom terbungkus dengan rapi sehingga elemen apapun yang mengikutinya pasti diposisikan di baris baru. Dan kita tak perlu pusing memikirkan elemen apa yang mengikutinya.

Tulis Komentar