Mengapa Elemen Terapung Tidak Menjejaskan Lebar Div Seterusnya?

Mengapa CSS Terapung Tidak Mengubah Lebar Div Seterusnya?

Apabila menggunakan sifat float:left pada elemen, ia dijangka bahawa elemen seterusnya akan meletakkan dirinya di sebelah kanan elemen terapung, bukan di bawahnya. Walau bagaimanapun, dalam beberapa kes, elemen seterusnya mungkin terus menjangkau lebar penuh.

Ini berlaku kerana gelagat asas unsur terapung dalam CSS. Apabila elemen diapungkan, ia dialih keluar daripada aliran biasa dokumen dan berkesan menjadi seperti imej. Kandungan yang mengikuti elemen terapung mengalir di sekelilingnya, mewujudkan pemisah baris.

Walau bagaimanapun, lebar blok yang mengandungi, yang menentukan ruang mendatar yang tersedia untuk elemen seterusnya, tidak dipengaruhi oleh elemen terapung. Kotak jidar elemen terapung (termasuk mana-mana kandungan) disimpan dalam blok yang mengandungi, jadi elemen berikutnya mesti masih sejajar dengan tepi kanannya.

Contoh yang disediakan oleh W3C menggambarkan tingkah laku ini:

[Imej terapung bertindih dengan elemen berikut dalam perenggan]

Seperti yang ditunjukkan dalam imej, elemen terapung menduduki ruang dalam blok yang mengandungi dan kandungan seterusnya membalutinya. Kotak garisan di sebelah kanan pelampung dipendekkan untuk menampungnya.

Penyelesaian: Mewujudkan Konteks Pemformatan Blok Baharu

Untuk mengelakkan elemen berikutnya daripada bertindih dengan terapung elemen, CSS menyediakan penyelesaian dengan menggunakan sifat limpahan. Menetapkan sifat limpahan kepada sesuatu selain daripada 'kelihatan' (cth., 'tersembunyi' atau 'tatal') mewujudkan konteks pemformatan blok baharu untuk elemen.

Dalam konteks pemformatan blok baharu ini, kotak margin elemen terapung dikekang, melarangnya daripada bertindih mana-mana terapung lain dalam konteks yang sama. Akibatnya, elemen seterusnya kini boleh menjajarkan dirinya di sebelah kanan elemen terapung:

[Contoh dengan limpahan: digunakan tersembunyi]

.kuning {

overflow: hidden;

}

Tingkah laku ini menjadi sangat relevan apabila berurusan dengan elemen yang kandungan yang mengalir di sekeliling elemen terapung cukup lama untuk diteruskan seperti biasa selepas terapung. Mengehadkan pertindihan secara lalai akan menghalang kandungan daripada berterusan di bawah elemen terapung.

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