asal :
.clearfix: setelah {
Visibilitas: Tersembunyi;
Tampilan: Blok;
Ukuran font: 0;
isi: " ";
jelas: keduanya;
Tinggi: 0;
}
.clearfix {display: inline-table;}
/* Bersembunyi dari IE-Mac */
* html .clearfix {tinggi: 1%;
.clearfix {display: block;}
/ * End hide dari IE-Mac */
ilustrasi :
* Terapkan blok deklarasi pertama ke sebagian besar browser yang sesuai dengan standar, dengan tujuan membuat blok nol yang tidak terlihat untuk membersihkan mengambang untuk elemen target.
*Item kedua menerapkan atribut tampilan tabel inline untuk ClearFix, hanya untuk IE/Mac.
* Gunakan* / Sembunyikan beberapa aturan dari IE / Mac:
* Tinggi: 1% digunakan untuk memicu haslayout di bawah IE6.
*Menerusan kembali properti tampilan ke IE di luar IE/Mac.
*Baris terakhir digunakan untuk mengakhiri peretasan untuk IE/Mac.
Karena metode ini ditargetkan pada browser yang telah menjadi sejarah (terutama IE5 di Mac), atau sedang dalam perjalanan ke standar, metode ini tidak lagi progresif saat waktu.
Setelah membuang dukungan untuk IE/Mac, metode baru untuk membersihkan mengambang:
/ * clearfix baru */
.clearfix: setelah {
Visibilitas: Tersembunyi;
Tampilan: Blok;
Ukuran font: 0;
isi: " ";
jelas: keduanya;
Tinggi: 0;
}
* html .clearfix {zoom: 1;
*: anak-anak pertama+html .clearfix {zoom: 1;
ilustrasi :
IE6 dan IE7 tidak mendukung: setelah kelas semu, jadi dua berikutnya diperlukan untuk memicu hamplayout IE6/7 untuk membersihkan float. Untungnya, Dukungan IE8: Setelah kelas semu. Oleh karena itu, hanya peretasan untuk IE6/7 yang diperlukan.