Ini akan membantu Anda hari ini (IE 8 dan lebih tinggi):
.group:after ( content: ""; display: table; clear: both; )Menerapkannya ke elemen induk mana pun di mana Anda perlu menghapus pelampung. Sebagai contoh:
Anda akan menggunakan ini daripada membersihkan float dengan sesuatu seperti overflow: hidden;pada induk (Anda tidak selalu ingin menyembunyikan overflow ).
Sekarang untuk sedikit sejarah!
Ini adalah versi populer asli, yang dirancang untuk mendukung browser sejauh mungkin:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Kemudian ada sedikit versi yang lebih bersih yang didokumentasikan di sini oleh Jeff Starr, berdasarkan fakta bahwa tidak ada yang menggunakan IE untuk Mac, itulah yang dimaksud dengan hack backslash.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Kemudian menjadi populer untuk menggunakan "grup" sebagai nama kelas, yang lebih bagus dan lebih semantik (melalui Dan Cederholm). Juga, contentproperti bahkan tidak membutuhkan ruang, itu bisa berupa string kosong (melalui Nicolas Gallagher). Kemudian, tanpa teks apa pun, font-sizetidak diperlukan (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Tentu saja, jika Anda menjatuhkan dukungan IE 6 atau 7, hapus baris terkait.
Pembaruan 18 Mei 2011: Nicolas Gallagher lagi dengan clearfix "mikro". Lihat juga barang tambahan ini..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Lihat bagian atas halaman ini untuk versi paling modern dari clearfix.
Di masa mendatang, kami mungkin dapat melakukan:
.group ( display: flow-root; )