Mengapakah `overflow: hidden` Kembangkan Ketinggian Elemen Induk dengan Anak Terapung?

Limpahan: Tersembunyi dan Pengembangan Ketinggian Elemen dengan Kanak-kanak Terapung

Dalam kelainan yang mengejutkan, limpahan tetapan: tersembunyi pada elemen luar boleh menyebabkannya untuk membesar tinggi untuk menampung unsur kanak-kanak terapung. Untuk memahami sebabnya, mari kita mendalami konsep konteks pemformatan blok.

Apabila elemen blok dengan limpahan ditetapkan kepada nilai tidak kelihatan (seperti tersembunyi) ditemui, ia mewujudkan konteks pemformatan blok baharu. Yang penting, akar konteks pemformatan blok (seperti yang dipanggil elemen ini) dijangka meregang secara menegak untuk mengandungi keturunan terapungnya, jika ia tidak mempunyai set ketinggian yang jelas.

Tingkah laku ini berpunca daripada semakan yang diperkenalkan dalam CSS2. 1 untuk menangani isu yang berbeza. Perubahan itu meluaskan konsep kelegaan secara berkesan, di mana tepi bawah apungan terkandung oleh blok yang mengandunginya (induk), untuk digunakan untuk menyekat pemformatan akar konteks tanpa ketinggian tertentu.

Dalam contoh yang disediakan, elemen luar ditetapkan untuk melimpah: tersembunyi, mencetuskan penciptaan konteks pemformatan blok baharu. Memandangkan elemen luar tidak mempunyai ketinggian tertentu, ia lalai untuk auto dan meregang ke bawah untuk melampirkan elemen dalam terapung.

Adalah penting untuk membezakan fenomena ini daripada kelegaan apungan. Kelegaan berlaku apabila elemen dengan jernih: kedua-duanya atau kesan serupa memaksa mendahului terapung ke bahagian atas bekas. Sebaliknya, melimpahkan akar konteks pemformatan blok untuk mengandungi terapung hanya berlaku dalam konteks itu dan tidak mempunyai kesan pada elemen di luarnya.

Atas ialah kandungan terperinci Mengapakah `overflow: hidden` Kembangkan Ketinggian Elemen Induk dengan Anak Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!