Mengapa Bekas Induk Saya Tidak Menunjukkan Warna Latar Belakangnya Apabila Menggunakan Elemen Terapung dalam CSS?

Warna Latar Belakang dan Elemen Terapung dalam CSS

Apabila bekerja dengan CSS, anda mungkin menghadapi situasi di mana elemen terapung menghalang bekas induk daripada mempamerkan warna latar belakangnya. Isu ini timbul kerana unsur terapung dialih keluar daripada aliran dokumen, menyebabkan induk kehilangan dimensi yang ditentukan.

Sebagai contoh, pertimbangkan struktur HTML berikut:

<div class="content">
    <div class="left">
        <p>some content</p>
    </div>
    <div class="right">
        <p>some content</p>
    </div>
</div>

Dengan yang berikut penggayaan:

.content {
    width: 960px;
    height: auto;
    margin: 0 auto;
    background: red;
    clear: both;
 }

.left {
     float: left;
     height: 300px;
     background: green;
 }

.right {
     float: right;
     background: yellow;
 }

Dalam senario ini, menambahkan kandungan pada elemen terapung "kanan" tidak akan menyebabkan div induk untuk mengembangkan secara menegak, mendedahkan latar belakang merah.

Untuk menyelesaikan isu ini, anda boleh menggunakan sifat limpahan pada elemen induk. Menetapkan limpahan kepada sama ada tersembunyi atau auto memaksa ibu bapa untuk mengandungi anak-anaknya, membenarkan warna latar belakang dipaparkan dengan betul.

Berikut ialah contoh menggunakan limpahan: tersembunyi:

.content {
    overflow:hidden;
}

Dengan memaksa elemen induk untuk mengandungi anak-anaknya, latar belakang merah kini kelihatan, walaupun dengan unsur terapung hadir.

Atas ialah kandungan terperinci Mengapa Bekas Induk Saya Tidak Menunjukkan Warna Latar Belakangnya Apabila Menggunakan Elemen Terapung dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!