Bagaimanakah `overflow:hidden` Mempengaruhi Elemen Terapung dan Bekas Induknya?

Limpahan CSS:tersembunyi dan Gelagat Terapung

Dalam CSS, sifat limpahan mengawal cara kandungan bertindak apabila kandungan melebihi saiz bekasnya. Apabila digunakan pada elemen dengan anak terapung, overflow:hidden mempunyai kesan khusus pada reka letak.

Impak pada Gelagat Terapung

Dalam contoh yang disediakan, elemen ul mempunyai beberapa anak li terapung. Tanpa overflow:hidden, ul akan runtuh ke ketinggian 0px, dengan kandungannya tersembunyi daripada pandangan. Ini kerana elemen terapung dialih keluar daripada aliran biasa, menyebabkan elemen induk runtuh.

Walau bagaimanapun, apabila limpahan:hidden digunakan pada ul, ia mewujudkan konteks pemformatan blok (BFC) baharu. BFC ialah rantau di mana unsur anak terkandung dan tidak menjejaskan reka letak unsur di luar wilayah.

Dengan mencipta BFC, limpahan:tersembunyi menghalang ul daripada runtuh. Sebaliknya, ia tetap kelihatan, mengandungi anak-anaknya yang terapung. Ini membolehkan teks atau elemen lain di luar BFC, seperti elemen p dalam kes ini, muncul selepas ul, bukannya di sebelah kanannya.

Menggunakan Kesan Jelas

Selain mengandungi elemen kanak-kanak, BFC juga mempunyai kesan membersihkan terapung. Ini bermakna bahawa sebarang teks atau elemen yang mengikuti ul akan muncul pada baris baharu di bawahnya. Ini dikenali sebagai "float clear."

Ringkasan

Dalam CSS, overflow:hidden digunakan pada elemen dengan anak terapung:

• Mencipta konteks pemformatan blok baharu, yang mengandungi kanak-kanak.
• Menghalang elemen induk daripada runtuh.
• Bertindak sebagai apungan yang jelas, memastikan kandungan yang mengikuti BFC muncul pada baris baharu.

Atas ialah kandungan terperinci Bagaimanakah `overflow:hidden` Mempengaruhi Elemen Terapung dan Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!