Mengapa Div Terapung Saya Tidak Mengubah Saiz Div Seterusnya?

Misteri Float Not Resize Div

Apabila menggunakan CSS float, andaian elemen berikutnya akan menjajar ke kiri dan bukannya mengalir ke yang baharu barisan. Walau bagaimanapun, dalam beberapa senario, seperti contoh yang diberikan, div berikut terus merentangi keseluruhan lebar dan bukannya bermula di sebelah kanan div pertama.

Untuk memahami tingkah laku ini, kami menyelidiki selok-belok apungan kedudukan. Apabila elemen diapungkan (dalam kes ini, div .inline), kandungan di bawahnya sejajar dengan sebelah kanan elemen itu. Walau bagaimanapun, lebar blok yang mengandungi yang ditubuhkan oleh elemen berikutnya (div .yellow) masih dikekalkan.

Tingkah laku ini digariskan dalam spesifikasi CSS: kotak blok tidak diposisikan mengalir secara menegak seolah-olah apungan tidak wujud. Walau bagaimanapun, kotak garisan di sebelah apungan dipendekkan untuk menampung kotak jidar apungan.

Oleh itu, jika elemen peringkat blok (seperti .div kuning) mempunyai latar belakang, ia akan memanjang melalui elemen terapung.

Resolusi

Menurut CSS tahap 2.1, elemen dengan sifat tertentu (penggantian peringkat blok, elemen mewujudkan konteks pemformatan blok baharu) tidak boleh bertindih dengan kotak margin sebarang terapung dalam konteks yang sama. Menambah sifat "limpahan" selain daripada "kelihatan" pada div .yellow menghalangnya daripada bertindih dengan elemen terapung.

Apabila Bertindih Boleh Berguna

Adalah penting untuk ambil perhatian bahawa pertindihan boleh memberi manfaat dalam situasi di mana kandungan selepas elemen terapung cukup lama untuk diteruskan seperti biasa. Mengehadkan kandungan secara lalai boleh menyebabkan kandungan itu tidak mengalir di bawah elemen terapung.

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