Bagaimanakah `limpahan: tersembunyi` Mempengaruhi Elemen Terapung dan Kandungan Seterusnya?

Limpahan CSS:tersembunyi dengan Terapung

Memahami Kesan Harta Limpahan

Sifat limpahan dalam CSS menentukan pengendalian kandungan yang melebihi sempadan unsur yang mengandunginya. Apabila digunakan pada elemen dengan unsur anak terapung, ia mewujudkan konteks pemformatan blok baharu.

Kesan pada Peletakan Teks

Pertimbangkan coretan kod berikut:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #dddddd;
  padding: 8px;
}

Secara lalai, elemen perenggan (p) yang muncul selepas ul akan ditolak ke bawah kerana ul ialah elemen peringkat blok. Walau bagaimanapun, apabila limpahan ditetapkan untuk disembunyikan pada ul, perkara berikut berlaku:

• Ul mewujudkan konteks pemformatan blok, yang mengandungi elemen anak apungannya (lis).
• The ul "muncul semula" dan tidak lagi runtuh ke ketinggian 0px.
• Perenggan (p) ditolak ke penghujung kandungan ul, muncul selepas elemen terapung.

Ini kerana overflow:hidden mencipta persekitaran pemformatan baharu di mana ul bertindak seperti elemen peringkat blok, yang mengandungi elemen anaknya.

Penjelasan Teknikal

Mengikut CSS spesifikasi:

• Apabila limpahan 'kelihatan': "Elemen peringkat blok yang tidak diganti tidak mewujudkan konteks pemformatan blok baharu, tanpa mengira sifat apungannya." ([§10.6.3](https://www.w3.org/TR/CSS2/visudet.html#block-level))
• Apabila limpahan ditetapkan kepada tidak kelihatan ' value: "Konteks pemformatan blok diwujudkan oleh unsur akar mana-mana subpokok yang unsur akarnya ialah punca senarai anak bagi unsur peringkat sebaris atau peringkat sebaris atom, elemen terapung, diposisikan secara mutlak, atau mempunyai 'limpahan' selain daripada 'kelihatan'." ([§10.6.7](https://www.w3.org/TR/CSS21/visudet.html#containing-block))

Limpahan tetapan:hidden pada ul mencipta yang baharu konteks pemformatan blok, menyebabkan ia mengandungi elemen anak dan menolak perenggan ke bawah.

Atas ialah kandungan terperinci Bagaimanakah `limpahan: tersembunyi` Mempengaruhi Elemen Terapung dan Kandungan Seterusnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!