Mengapa Bekas dengan Kanak-kanak Terapung Mempunyai Ketinggian Sifar?

Memahami Ketinggian Bekas dengan Kanak-kanak Terapung

Apabila bekerja dengan CSS, anda mungkin menghadapi situasi di mana bekas ibu bapa dengan anak terapung berakhir dengan ketinggian sifar. Tingkah laku ini boleh mengelirukan, memandangkan kanak-kanak itu menduduki ruang dalam bekas.

Isunya

Pertimbangkan CSS berikut:

#wrapper {
  width: 75%;
  min-width: 800px;
}
.content {
  text-align: justify;
  float: right;
  width: 90%;
}
.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

Jika anda menggunakan CSS ini dengan HTML berikut:

<div>

Halaman akan dipaparkan dengan betul. Walau bagaimanapun, jika anda memeriksa elemen, anda akan melihat bahawa div#wrapper ditunjukkan sebagai 0px tinggi.

Mengapa Ia Berlaku

Kandungan yang terapung tidak mempengaruhi ketinggian bekasnya. Dalam kes ini, kedua-dua elemen .content dan .lbar terapung, jadi ia dialih keluar daripada aliran biasa dokumen. Akibatnya, bekas tidak mengandungi kandungan yang tidak terapung. Ini membolehkan ketinggian bekas runtuh kepada sifar, sama seperti ia kosong.

Penyelesaian

Untuk menangani isu ini, anda boleh menggunakan kaedah berikut:

• limpahan: tersembunyi: Menetapkan sifat ini pada bekas akan menghalang kandungan daripada melimpah di luarnya sempadan. Ini mewujudkan konteks pemformatan blok baharu, yang memaksa bekas untuk mengembang untuk menampung anak terapungnya.
• Mengandungi Terapung: Teknik lain untuk mengandungi terapung termasuk menggunakan sifat jelas atau menambah div kosong dengan jelas: kedua-duanya; di hujung bekas.

Memahami gelagat terapung ini adalah penting untuk mencipta reka letak dengan CSS. Dengan menggunakan teknik yang sesuai, anda boleh memastikan bahawa bekas anda mempunyai ketinggian yang diingini dan elemen halaman anda diletakkan dengan betul.

Atas ialah kandungan terperinci Mengapa Bekas dengan Kanak-kanak Terapung Mempunyai Ketinggian Sifar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!