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>

<div>

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 {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: hidden;

Salin selepas log masuk