Mengapa Elemen Terapung Melangkaui Bekas Induknya?

Mengapa Elemen Terapung Melangkaui Div yang Mengandungi

Dalam div, apabila elemen diberi apungan, ia boleh melangkaui sempadan div. Ini berlaku kerana elemen terapung dialih keluar daripada aliran biasa dokumen, menyebabkan ia diletakkan di sekeliling elemen lain dan bukannya bersebelahan dengannya. Akibatnya, mereka tidak menyumbang kepada lebar div yang mengandungi.

Penyelesaian untuk Meregangkan Item Terapung

1. Overflow:hidden

Penyelesaian mudah ialah menambah overflow:hidden pada div induk. Ini memaksa semua yang melimpahi sempadan ibu bapa disembunyikan:

#parent { overflow: hidden }

2. Div Induk Terapung

Pilihan lain ialah mengapungkan div induk juga:

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

Ini menjadikan div induk berkelakuan seperti elemen terapung, membenarkan elemen anak terapung mempengaruhinya ketinggian.

3. Elemen Jelas

Menggunakan elemen yang jelas juga boleh menyelesaikan isu:

<div class="parent">
  <img  class="floated_child lazy" src="/static/imghwm/default1.png" data-src="..." alt="Mengapa Elemen Terapung Melangkaui Bekas Induknya?" >
  <span class="clear"></span>
</div>

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

Elemen jelas memecahkan aliran elemen anak terapung, menolaknya ke bawah daripada div induk.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Melangkaui Bekas Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!