Bagaimana untuk Mencegah Limpahan:tersembunyi daripada Menyembunyikan Kanak-kanak Terapung dalam CSS?

Memelihara Keterlihatan Kanak-kanak dalam Limpahan: Bekas Tersembunyi

Dalam CSS, limpahan: sifat tersembunyi menyembunyikan kandungan limpahan dalam bekas. Walau bagaimanapun, apabila digunakan pada ibu bapa kanak-kanak terapung, kesan yang menarik berlaku. Bekas itu secara automatik menjajarkan dirinya bersebelahan dengan adik-beradik terapungnya, mencipta reka letak di mana induk unsur terapung kelihatan disandingkan dengannya.

Pernyataan Masalah:

Cabarannya terletak pada mengekalkan susun atur ini tanpa menyembunyikan kanak-kanak. Dengan menjadikan bekas melimpah: kelihatan, bekas itu mengabaikan aliran unsur terapung, muncul di atasnya.

Penyelesaian:

Untuk mengatasinya, gunakan " teknik clearfix". Dengan menambahkan kelas "clearfix" pada induk dan mengalih keluar limpahan: tersembunyi, peraturan CSS berikut mengekalkan reka letak yang diingini:

<code class="css">.clearfix:before,
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1; /* IE < 8 */
}</code>

Pendekatan ini secara berkesan "membersihkan" unsur terapung sambil mengekalkan reka letaknya, membenarkan induk bekas untuk menyelaraskan dirinya bersebelahan dengan mereka tanpa menutupi anak-anaknya.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Limpahan:tersembunyi daripada Menyembunyikan Kanak-kanak Terapung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!