Mengapa Elemen Terapung Melimpahi Div yang Mengandunginya, dan Bagaimana Saya Boleh Membetulkannya?

Pengapungan Elemen Terapung Melarikan Diri: Menyelesaikan Masalah Limpahan Div

Apabila bekerja dengan apungan dalam div, anda mungkin menghadapi isu di mana elemen terapung melampaui sempadan div yang mengandungi mereka. Perbezaan dalam dimensi ini boleh mengganggu reka letak yang anda inginkan.

Punca Punca:

Apungan dialih keluar daripada aliran dokumen biasa, mewujudkan jurang dalam elemen induk. Selepas itu, kandungan tidak terapung akan menyesuaikan untuk mengisi ruang kosong ini, menghasilkan div yang lebih kecil yang gagal merangkumi elemen terapung.

Penyelesaian 1: Kawalan Limpahan

• Tambah limpahan: tersembunyi kepada induk div:

#parent { overflow: hidden }

Ini menghalang limpahan unsur terapung dan memastikan ia kekal dalam sempadan div. Walau bagaimanapun, ia mungkin memotong kandungan yang melebihi ketinggian div.

Penyelesaian 2: Terapung Div Induk

• Apungkan div induk:

#parent { float: left; width: 100% }

Ini membolehkan div induk meregang secara menegak untuk menampung kandungan terapung. Pastikan lebar div ditetapkan kepada nilai atau peratusan tetap untuk mengelakkan pengembangan tak terhingga.

Penyelesaian 3: Elemen Jelas

• Gunakan elemen yang jelas di bawah kandungan terapung:

<div class="parent">
  <img class="floated_child" src="..." />
  <span class="clear"></span>
</div>

span.clear { clear: left; display: block; }

Unsur yang jelas bertindak sebagai sentinel, memaksa kandungan berikut dimulakan pada baris baharu di bawah kandungan terapung, memulihkan dimensi div yang betul.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Melimpahi Div yang Mengandunginya, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!