Ini akan membuat anda baik-baik saja hari ini (IE 8 dan lebih tinggi):
.group:after ( content: ""; display: table; clear: both; )Terapkan pada elemen induk di mana anda perlu membersihkan pelampung. Sebagai contoh:
Anda akan menggunakan ini daripada membersihkan pelampung dengan sesuatu seperti overflow: hidden;pada ibu bapa (anda tidak selalu mahu menyembunyikan limpahan ).
Sekarang untuk sedikit sejarah!
Ini adalah versi popular yang asal, yang dirancang untuk menyokong penyemak imbas 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 bahawa tidak ada yang menggunakan IE untuk Mac, itulah yang dimaksudkan dengan hacks 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 popular untuk menggunakan "kumpulan" sebagai nama kelas, yang lebih baik dan lebih semantik (melalui Dan Cederholm). Juga, contentharta tanah tidak memerlukan ruang, ia boleh menjadi tali kosong (melalui Nicolas Gallagher). Kemudian, tanpa teks, 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 */Sudah tentu, jika anda menjatuhkan sokongan IE 6 atau 7, hapus garis yang berkaitan.
Kemas kini 18 Mei 2011: Nicolas Gallagher sekali lagi dengan pembaikan "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 bahagian atas halaman ini untuk versi pembaikan yang paling moden.
Pada masa akan datang, kami mungkin dapat melakukan:
.group ( display: flow-root; )