Bagaimanakah Saya Boleh Mengosongkan Terapung dengan Cekap dalam CSS Moden Tanpa Penanda Tambahan?

Amalan Terbaik untuk Membersihkan Terapung dalam CSS Moden

Dalam bidang CSS, membersihkan terapung telah menjadi cabaran yang berterusan, dengan pelbagai teknik yang muncul selama bertahun-tahun. Manakala penggunaan
> telah menjadi pendekatan biasa, ia memperkenalkan markup HTML yang tidak perlu. CSS moden menawarkan penyelesaian yang lebih elegan dan cekap untuk masalah ini.

Pendekatan Elemen Pseudo:

Pada tahun 2014, teknik pilihan adalah menggunakan elemen pseudo untuk mencipta pembetulan jelas. Ini melibatkan penambahan gaya berikut pada bekas induk unsur terapung:

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

Kaedah ini berkesan dalam semua penyemak imbas moden dan mengelakkan keperluan untuk elemen HTML tambahan.

Harta Limpahan:

Penyelesaian penyemak imbas silang yang lain ialah menetapkan sifat limpahan bekas induk kepada tersembunyi atau auto. Ini mempunyai kesan membersihkan terapung dalam bekas, tanpa memerlukan penanda tambahan:

.container {
  overflow: hidden;
}

Pembetulan Pembetulan Mikro:

Untuk pendekatan yang lebih minimum, Nicholas Gallagher telah mencadangkan teknik micro clearfix:

.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  display: table;
}

.cf:after {
  clear: both;
}

Teknik ini menggabungkan sifat limpahan dengan elemen pseudo untuk mencapai hasil yang sama seperti teknik clearfix yang dinyatakan sebelum ini.

Mengelakkan Hack JavaScript:

Adalah dinasihatkan untuk mengelak daripada menggunakan hacks JavaScript untuk tujuan ini. JavaScript boleh mempunyai tahap sokongan yang berbeza-beza dalam penyemak imbas yang berbeza, dan ia mungkin tidak sentiasa tersedia atau didayakan apabila diperlukan. Oleh itu, adalah lebih dipercayai untuk menggunakan penyelesaian berasaskan CSS untuk keserasian merentas pelayar.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengosongkan Terapung dengan Cekap dalam CSS Moden Tanpa Penanda Tambahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!