Bagaimanakah `overflow: hidden` Mempengaruhi Elemen Terapung Dalam `` dan Peletakan Teks Seterusnya?

Limpahan CSS:tersembunyi dengan Diterangkan Terapung

Soalan: Bagaimanakah sifat limpahan mempengaruhi penempatan teks relatif kepada ul yang mengandungi terapung elemen?

Penjelasan:

Secara lalai, elemen peringkat blok seperti ul dan p terbentang hingga 100% daripada lebar induk. Dalam contoh yang diberikan, ul hanya mengandungi elemen li terapung, menyebabkan ia runtuh ke ketinggian 0px sambil mengekalkan lebar penuhnya.

Akibatnya, unsur p bersebelahan muncul di sebelah kanan terapung elemen li, menganggapnya sebagai terapung biasa.

Walau bagaimanapun, apabila overflow:hidden digunakan pada ul, ia mewujudkan konteks pemformatan blok baharu (BFC), yang mengandungi unsur li dalam ul. Ini menghalang ul daripada runtuh dan memaksa elemen p ditolak ke bawah, mengosongkan elemen li terapung.

Butiran Teknikal:

Mengikut spesifikasi CSS , apabila limpahan kelihatan untuk elemen tidak diganti peringkat blok dalam aliran biasa, ia berkelakuan sebagai elemen blok standard. Walau bagaimanapun, menetapkan limpahan kepada mana-mana nilai yang tidak kelihatan (termasuk tersembunyi) menghasilkan BFC, yang menghasilkan gelagat berbeza.

Contoh:

Pertimbangkan kod berikut:

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #dddddd;
  border: 2px solid red;
}

li {
  float: left;
}

a {
  display: block;
  width: 60px;
  background-color: #555;
  color: white;
}

p {
  margin: 0;
  outline: 2px dotted blue;
}

#two {
  clear: both;
  overflow: hidden;
}

Tanpa Limpahan:

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>
<p>
  Notice the collapsed ul - no background-color visible, collapsed border and this paragraph treats the lis as regular floats
</p>

Dengan Limpahan:

<ul>

Seperti yang anda lihat, menggunakan limpahan:tersembunyi pada ul memaksa elemen li terapung untuk terkandung dalam ul dan mengosongkan elemen p, menolaknya ke bahagian bawah halaman.

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