Mengapa Div Ibu Bapa Runtuh kepada Ketinggian Sifar Apabila Mengandungi Anak Terapung?

Enigma Ibu Bapa Berketinggian Sifar: Kanak-kanak Terapung dan Ketinggian Kontena

Dalam bidang reka bentuk web, menghadapi tingkah laku pelik dalam CSS penggayaan boleh membingungkan. Satu teka-teki sedemikian timbul apabila ketinggian div ibu bapa secara misteri mengecut kepada sifar walaupun mengandungi unsur anak terapung. Untuk membongkar misteri ini, mari kita mendalami kod CSS dan HTML:

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>Dengan gaya ini digunakan, halaman dipaparkan dengan betul. Walau bagaimanapun, selepas memeriksa elemen, pemerhatian yang pelik muncul: div induk, #wrapper, mempamerkan ketinggian 0px walaupun terdapat div kanak-kanak terapung. Tingkah laku ini menimbulkan persoalan: mengapa ketinggian div induk hilang?</p>
<p>Jawapannya terletak pada sifat semula jadi unsur terapung dalam CSS. Kandungan terapung pada dasarnya dialih keluar daripada aliran dokumen biasa, menduduki tempat di luar reka letak biasa. Akibatnya, ketinggian bekas ditentukan semata-mata oleh kandungan tidak terapungnya. Dalam kes ini, memandangkan semua kandungan dalam #wrapper diapungkan, ketinggian bekas runtuh kepada sifar.</p>
<p>Untuk membetulkan tingkah laku ini, beberapa teknik boleh digunakan:</p>
<ul>
<li>
<strong>Limpahan : Tersembunyi:</strong> Dengan menetapkan limpahan: tersembunyi pada div induk, konteks pemformatan blok baharu dicipta. Ini secara berkesan memaksa elemen anak terapung menyumbang kepada ketinggian bekas.</li>
<li>
<strong>Mengandungi Terapung:</strong> Pelbagai kaedah wujud untuk mengandungi unsur terapung, memastikan ketinggian bekas induk mengembang dengan sewajarnya. Ini termasuk menggunakan elemen pseudo, CSS3 flexbox atau reka letak grid.</li>
</ul>
<p>Dengan memahami gelagat unsur terapung dan melaksanakan teknik pembendungan yang sesuai, pembangun boleh menghalang fenomena div induk ketinggian sifar yang mengelirukan dan mengekalkan kawalan atas reka letak halaman mereka.</p>
</div>

Atas ialah kandungan terperinci Mengapa Div Ibu Bapa Runtuh kepada Ketinggian Sifar Apabila Mengandungi Anak Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!