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

<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;