Mengapa `float: left` Tidak Mengubah Lebar Div?

Mengapa CSS Float Gagal Mengubah Suai Div Width

Isu Penerangan

Dalam CSS, float: left property dijangka mengalihkan elemen berikutnya ke kiri sebaliknya mencipta barisan baharu. Walau bagaimanapun, dalam senario seperti contoh yang diberikan, div kedua terus merentangi keseluruhan lebar, menentang jangkaan. Kandungan, sebaliknya, diselaraskan dengan betul.

Penjelasan Tingkah Laku

Tingkah laku ini wujud dalam kedudukan apungan. Apabila elemen diapungkan (div .inline dalam kes ini), kandungan mengalir di sekeliling sebelah kanannya. Kotak garisan dipendekkan untuk menampung kotak margin apungan, tetapi lebar blok yang mengandungi (diwujudkan oleh div .yellow) kekal dikhaskan. Ini dinyatakan dalam spesifikasi CSS.

Penyelesaian

Untuk mengelakkan div .yellow daripada bertindih dengan elemen terapung, seseorang boleh menambah sifat limpahan dengan nilai selain daripada yang boleh dilihat. Ini memaksa penyemak imbas untuk mencipta konteks pemformatan blok baharu, mengelakkan pertindihan.

Atas ialah kandungan terperinci Mengapa `float: left` Tidak Mengubah Lebar Div?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!