Hapus kata-kata baru yang mengambang

asal :

.clearfix:setelah {
visibilitas: tersembunyi;
tampilan: blok;
ukuran font: 0;
isi: " ";
jelas: keduanya;
tinggi: 0;
}
.clearfix { tampilan: tabel sebaris; }
/* Menyembunyikan dari IE-mac */
* html .clearfix { tinggi: 1%;
.clearfix { tampilan: blok; }
/* Akhiri penyembunyian dari IE-mac */

mengilustrasikan :

• *Menerapkan blok deklarasi pertama ke sebagian besar browser yang memenuhi standar, dengan tujuan membuat blok konten kosong yang tidak terlihat yang menghapus float untuk elemen target.
• *Item kedua menerapkan atribut tampilan tabel sebaris untuk clearfix, hanya untuk IE/Mac.
• *Eksploitasi* / Sembunyikan beberapa aturan dari IE/Mac:
• * height:1% digunakan untuk memicu haslayout di IE6.
• *Terapkan kembali atribut tampilan blok ke IE selain IE/Mac.
• *Baris terakhir digunakan untuk mengakhiri peretasan untuk IE/Mac.

Karena browser yang ditargetkan oleh metode ini telah menjadi sejarah (terutama IE5 di Mac), atau sedang dalam proses menjadi standar, metode ini tidak lagi mutakhir.

Setelah menghentikan dukungan untuk IE/Mac, metode baru untuk membersihkan float:

/* perbaikan baru yang jelas */
.clearfix:setelah {
visibilitas: tersembunyi;
tampilan: blok;
ukuran font: 0;
isi: " ";
jelas: keduanya;
tinggi: 0;
}
* html .clearfix { pembesaran: 1 } /* IE6 */
*:anak pertama+html .clearfix { zoom: 1 } /* IE7 */

mengilustrasikan :

Baik IE6 maupun IE7 tidak mendukung kelas semu :after, sehingga dua berikutnya diperlukan untuk memicu haslayout IE6/7 untuk menghapus float. Untungnya IE8 mendukung :after pseudo-class. Jadi hanya diperlukan peretasan untuk IE6/7.