Bagaimana untuk Mencegah Latar Belakang CSS daripada Menyembunyikan Kandungan Apabila Menggunakan Elemen Terapung?

Warna Latar Belakang CSS dengan Elemen Terapung

Pertimbangkan kod HTML berikut:

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

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

Dan CSS yang sepadan:

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

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

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

Apabila menambahkan kandungan pada .right, div .content induk gagal meregangkan memuatkan ketinggian anaknya, menghasilkan latar belakang merah yang tidak kelihatan menutupi kawasan yang diperluaskan.

Memahami Masalah

Unsur terapung, seperti .kiri dan .kanan dalam kes ini, dialih keluar daripada aliran normal dokumen. Ini memberi kesan kepada elemen induk, kerana ia tidak lagi mempunyai ketinggian yang ditentukan kerana kanak-kanak tidak menduduki ruang fizikal. Akibatnya, elemen induk runtuh pada dirinya sendiri.

Penyelesaian: Mengekalkan Dimensi Kotak

Untuk membetulkan isu ini, elemen induk perlu mengekalkan dimensinya walaupun terdapat elemen anak terapung. Ini boleh dicapai dengan menambah limpahan: tersembunyi pada .kandungan.

.content {
    overflow: hidden;
}

Sebagai alternatif, limpahan: auto boleh digunakan, menyediakan kefungsian yang serupa sambil membenarkan anda mengenal pasti sebarang percanggahan ketinggian.

Ini pengubahsuaian memastikan .content merangkum anak terapungnya, menyelesaikan isu merah terpotong latar belakang.

Alternatif: Clearfix

Untuk penyemak imbas dengan sokongan terhad, menggunakan penggodaman clearfix boleh menangani masalah ini. Walau bagaimanapun, pendekatan ini tidak disyorkan untuk keserasian penyemak imbas moden.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Latar Belakang CSS daripada Menyembunyikan Kandungan Apabila Menggunakan Elemen Terapung?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!