简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > tutorial css > teks badan

Mengapa `float: left` Tidak Mengubah Lebar Div?

DDD
Lepaskan： 2024-10-27 20:57:30
asal
919 orang telah melayarinya

Why Does `float: left` Not Change the Width of a 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!

sumber：php.cn
Artikel sebelumnya：Mengapa Imej Saya Beralih Ke Kanan Pada Tuding dalam Chrome? Artikel seterusnya：Berikut ialah beberapa pilihan tajuk berdasarkan artikel anda, dengan mengingati format soalan: Umum & Fokus pada Isu: * Mengapa Adakah `overflow-wrap: break-word` Menyebabkan Bar Skrol dalam Flexbox? * F
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...
daripada 2024-04-29 11:01:01
0
2
1691
Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?
daripada 2024-04-23 00:22:19
0
10
1855
Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.
daripada 2024-04-19 15:37:47
0
1
1568
Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...
daripada 2024-04-18 23:52:34
0
1
1475
Di manakah perisian kursus tentang pemetaan minda CSS? Perisian kursus
daripada 2024-04-16 10:10:18
0
0
1526
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！