Cara - Hapus Float (Clearfix)
Pelajari cara membersihkan float dengan peretasan "clearfix".
Cara Menghapus Float (Clearfix)
Elemen setelah elemen mengambang akan mengalir di sekitarnya. Gunakan peretasan "clearfix" untuk memperbaiki masalah:
Tanpa Clearfix
Dengan Clearfix
Peretasan clearfix
Jika suatu elemen lebih tinggi dari elemen yang mengandungnya, dan itu melayang, itu akan meluap di luar wadahnya.
Kemudian kita dapat menambahkan overflow: auto;
elemen yang mengandung untuk memperbaiki masalah ini:
Contoh
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.