Mengapa Elemen Terapung Nampak Tidak Menjejaskan Lebar Div?

Gelagat Apung CSS: Memahami Pemeliharaan Lebar Div

Apabila menggunakan sifat float:left pada elemen HTML, elemen berikut dijangka akan ditolak ke kiri daripada membalut ke baris baru. Walau bagaimanapun, dalam keadaan tertentu, nampaknya lebar div tidak terjejas.

Dalam contoh yang diberikan, kandungan div kedua (dengan class="kuning") dijajarkan dengan betul, tetapi div itu sendiri masih menjangkau lebar penuh bekas. Tingkah laku ini berpunca daripada sifat asas kedudukan terapung.

Apabila elemen terapung, ia dialih keluar daripada aliran biasa dokumen. Walau bagaimanapun, ruang yang diduduki oleh elemen terapung masih "terpelihara" oleh elemen berikutnya yang akan menduduki ruang tersebut.

Tempahan ruang ini didokumenkan dalam spesifikasi CSS, yang menyatakan bahawa blok tidak diposisikan- elemen tahap (seperti div) merawat terapung seolah-olah ia tidak wujud dari segi susun atur menegak. Walau bagaimanapun, kotak garisan (kawasan segi empat tepat yang mengandungi teks) dipendekkan untuk menampung kotak margin apungan.

Akibatnya, kandungan elemen seterusnya mengalir ke bawah bahagian apungan, tetapi lebarnya bekas (ditentukan oleh elemen tidak terapung berikut) kekal dikhaskan.

Untuk menangani isu ini, satu penyelesaian ialah menggunakan sifat limpahan (seperti limpahan: tersembunyi) pada elemen seterusnya. Dengan berbuat demikian, anda mewujudkan konteks pemformatan blok baharu, yang menghalang elemen daripada bertindih dengan kotak margin elemen terapung. Ini memaksa elemen seterusnya mengecil kepada saiz yang tidak bertindih dengan pelampung.

Atas ialah kandungan terperinci Mengapa Elemen Terapung Nampak Tidak Menjejaskan Lebar Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!