Mengapakah `overflow: hidden` Menyebabkan Pengembangan Ketinggian dalam CSS Apabila Mengandungi Elemen Terapung?

Limpahan: Kesan Sampingan Pengembangan Ketinggian Tersembunyi

Dalam dunia reka letak CSS, limpahan: sifat tersembunyi memainkan peranan penting dalam mengawal tingkah laku kandungan yang melebihi ruang yang diperuntukkan. Walau bagaimanapun, satu kesan sampingan yang tidak dijangka menggunakan sifat ini ialah ia boleh menyebabkan elemen luar mengembang ketinggian untuk menampung unsur terapung.

Untuk memahami fenomena ini, mari pertimbangkan contoh berikut:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

Apabila limpahan: sifat tersembunyi digunakan pada elemen .luar, kami perhatikan bahawa ia mengembang ketinggian untuk merangkumi kedua-dua unsur terapung (.dalam-kiri dan .dalam-kanan). Mengapa ini berlaku?

Penjelasan terletak pada konsep konteks pemformatan blok. Kotak blok dengan limpahan yang tidak kelihatan (lalai) mencipta konteks pemformatan blok baharu. Kotak yang mencipta konteks pemformatan blok baharu ditakrifkan untuk meregangkan untuk mengandungi apungannya mengikut ketinggian jika ia sendiri tidak mempunyai ketinggian tertentu, lalai kepada auto.

Dalam contoh di atas, elemen .luar pada mulanya tidak mempunyai eksplisit ketinggian, menghasilkan nilai auto lalai. Memandangkan ia mencipta konteks pemformatan blok baharu, kotak terbentang untuk menampung tepi bawah unsur terapung di dalamnya, walaupun kandungan dalam elemen .luar adalah lebih pendek.

Kesan sampingan limpahan ini: tersembunyi ialah tidak sama dengan pembersihan terapung. Pembersihan hanya berlaku apabila harta yang jelas digunakan secara eksplisit dan terdapat apungan terdahulu untuk dibersihkan. Selain itu, menggunakan elemen ketinggian sifar atau elemen pseudo di hujung elemen kontena untuk memaksa kelegaan (pembetulan jelas) tidak menyebabkan elemen luar meregang ketinggian.

Memahami tingkah laku ini adalah penting untuk mengurus dengan berkesan susun atur dan menghalang pengembangan ketinggian yang tidak dijangka dalam kod CSS anda. Dengan mempertimbangkan kesan konteks pemformatan blok dan pelepasan apungan, anda boleh memperhalusi reka bentuk anda untuk mencapai hasil visual yang diingini.

Atas ialah kandungan terperinci Mengapakah `overflow: hidden` Menyebabkan Pengembangan Ketinggian dalam CSS Apabila Mengandungi Elemen Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!