Mengapa Elemen Terapung Menghalang Latar Belakang Bekas Induk daripada Dipaparkan Sepenuhnya, dan Bagaimana Perkara Ini Boleh Dibetulkan?

Impak Terapung Elemen Liputan Warna Latar Belakang

Dalam HTML, unsur terapung boleh mengganggu liputan warna latar belakang bekas induk. Apabila elemen bekas mempunyai elemen anak dengan sifat terapung, elemen anak dialih keluar daripada aliran dokumen biasa. Ini boleh mengakibatkan elemen induk runtuh pada dirinya sendiri, menyebabkan warna latar belakangnya dikaburkan.

Untuk menangani isu ini dalam senario disediakan:

<div><p></p></div><br>

Dengan CSS berikut:

.kandungan {

width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;

}

.kiri {

 float: left;
 height: 300px;
 background: green;

}

.kanan {

 float: right;
 background: yellow;

}

Hasil yang diinginkan ialah warna latar belakang merah meliputi keseluruhan ketinggian div ".content". Walau bagaimanapun, apabila div ".right" diisi dengan kandungan, ia gagal mengembangkan ketinggian bekas induknya, menyebabkan latar belakang merah tidak lengkap.

Penyelesaian terletak pada penggunaan sifat "overflow: hidden" pada elemen ".content":

<br>.content {<pre class="brush:php;toolbar:false">overflow: hidden;

}

Dengan menetapkan "overflow: hidden," div ".content" terpaksa mengandungi elemen anak terapungnya, menghalangnya daripada runtuh. Akibatnya, latar belakang merah kini merangkumi keseluruhan ketinggian div ".content", seperti yang dimaksudkan.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Menghalang Latar Belakang Bekas Induk daripada Dipaparkan Sepenuhnya, dan Bagaimana Perkara Ini Boleh Dibetulkan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!