Mengapa Elemen Terapung Melangkaui Sempadan Div Yang Mengandunginya, dan Bagaimana Saya Boleh Membetulkannya?

Elemen Terapung Melebihi Sempadan Div: Punca dan Penyelesaian

Apabila meletakkan elemen dalam div dan menetapkan lebar khusus untuk div, tingkah laku yang tidak dijangka mungkin berlaku apabila unsur terapung melangkaui sempadan div. Ini berlaku kerana sifat terapung yang wujud, yang mengalihkan elemen daripada aliran biasa.

Sebab Isu

Apabila elemen terapung, ia dialih keluar daripada aliran dokumen dan diletakkan di sebelah kiri atau kanan div yang mengandungi. Oleh itu, elemen terapung tidak menjejaskan ketinggian atau lebar div bekas kerana ia tidak dianggap sebahagian daripada kandungannya.

Penyelesaian untuk Meregangkan Elemen Terapung

Terdapat ialah beberapa cara untuk menangani isu ini dan memastikan elemen terapung meregangkan ketinggian div yang mengandungi:

1. Tetapkan Harta Limpahan kepada "tersembunyi"

Tambahkan CSS berikut pada div induk:

#parent {
  overflow: hidden;
}

Dengan menetapkan limpahan: tersembunyi, div induk akan berkembang untuk menampung kandungannya, termasuk unsur terapung.

2. Terapung Div Induk

Apungkan div induk juga dengan menambahkan CSS berikut:

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

Apung div induk membolehkan anak terapungnya meregangkan ketinggiannya.

3. Gunakan Elemen Jelas

Masukkan elemen jelas dalam div induk sejurus selepas elemen terapung:

<div>

Gaya CSS untuk elemen jelas:

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

Elemen jelas memaksa elemen terapung untuk bermula pada permulaan baris seterusnya, membolehkan div induk meregangkan untuk menampung mereka.

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