Rumah hujung hadapan web html tutorial 浮动元素为什么会卡住?

浮动元素为什么会卡住?

Mar 31, 2017 pm 05:10 PM

<!DOCTYPE html> 
<html> 
<head> 
<title>浮动元素卡住</title> 
</head> 
<body style="width:500px;"> 
<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div> 
<div style="background-color:#F00;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#00F;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#F00;width:200px;height:100px;float:left;"></div> 
<div style="background-color:#000;width:200px;height:100px;float:left;"></div> 
</body> 
</html>
Salin selepas log masuk

1369.jpg

为什么蓝色区域不在绿色的下面?下面的红色为什么也不能在绿色的下面?

回复讨论(解决方案)

<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div>
Salin selepas log masuk

高度不一致

浮动本来就这样。。习惯就好了。。一般如果2个一行。。都有个清除浮动。。就会自动下来。

<div style="background-color:#0F0;width:200px;height:110px;float:left;"></div> 
Salin selepas log masuk

我知道高度不一样,也知道清除浮动可以达到效果,我想知道的是为什么有这样的结果??

因为块级元素独占一行,你浮动了过后这边没有了容下他的空间,自然跑到右边去了啊

你应该换个思路 
不要问为什么 
你已经看到了 结果 
也就是你 已经知道在什么样的情况下 会发生什么事情了 
所见即所得啊

 以上就是浮动元素为什么会卡住?的内容,更多相关内容请关注PHP中文网(www.php.cn)!

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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Mengapa wps tersekat sebaik sahaja saya membukanya? Mengapa wps tersekat sebaik sahaja saya membukanya? Oct 23, 2023 pm 04:54 PM

Sebab mengapa WPS tersekat sebaik sahaja anda membukanya mungkin disebabkan oleh penggunaan sumber yang berlebihan, isu versi perisian, konflik pemalam, isu cache, virus atau perisian hasad, isu keserasian sistem, konflik perisian lain atau rasuah data, dsb. Pengenalan terperinci: 1. Penggunaan sumber terlalu tinggi WPS ialah perisian pejabat berkuasa yang memerlukan sejumlah sumber sistem untuk dijalankan Jika konfigurasi komputer rendah atau program lain yang menggunakan banyak sumber sedang dijalankan pada masa yang sama , WPS mungkin dibuka Kemudian ia menjadi beku;

Bagaimana untuk menyelesaikan masalah tetapan semula win10 tersekat pada 1% Bagaimana untuk menyelesaikan masalah tetapan semula win10 tersekat pada 1% Dec 25, 2023 pm 05:49 PM

Apabila kami menggunakan komputer sistem pengendalian win10, kadangkala kami mungkin menetapkan semula komputer kami untuk menyelesaikan beberapa masalah. Jadi jika tetapan semula win10 tersekat pada 1% dan tidak bertindak balas semasa proses ini, ramai rakan tidak tahu bagaimana untuk menyelesaikannya. Editor berpendapat bahawa kita boleh menyemak dahulu sama ada keadaan rangkaian kita normal dan kemudian menolak situasi lain. Apa yang perlu dilakukan jika tetapan semula win10 tersekat pada 1% dan tidak bertindak balas: 1. Dalam kes ini, anda menyandarkan pemacu C anda 2. Adalah disyorkan untuk memformatkan C secara langsung dan kemudian memasangnya semula 3. Selepas menetapkan semula, pemacu C akan mempunyai lebih daripada 10G fail lama 4 . Jika anda tidak mahu memformat pemacu C, tunggu dengan sabar Penyelesaian untuk tetapan semula win10 tersekat: 1. Buka menu mula win10 dan pilih Tetapan. 2. Tikus

Penyelesaian untuk kemas kini win11 tersekat pada 88% Penyelesaian untuk kemas kini win11 tersekat pada 88% Jan 11, 2024 pm 09:54 PM

Baru-baru ini, sistem win11 telah dikeluarkan secara rasmi Ramai pengguna yang berminat telah mencuba untuk menaik taraf sistem Namun, sesetengah pengguna telah menghadapi beberapa masalah semasa menaik taraf menaik taraf atau komputer. Apa yang perlu dilakukan jika kemas kini win11 tersekat pada 88%: Kaedah 1: 1. Secara umumnya, naik taraf tersekat hanya kerana masa memuatkan dan membaca agak lama, mungkin kerana kelajuan membaca cakera kita perlahan. 2. Anda boleh cuba mengosongkan ruang cakera, tetapi dalam kebanyakan kes anda hanya perlu menunggu seketika sebelum meneruskan peningkatan. Kaedah 2: 1. Jika kita masih tidak dapat mengemaskini setelah menunggu lama, kita boleh mulakan semula komputer dahulu dan cuba lihat sama ada peningkatan boleh diteruskan. 2. Jika anda memulakan semula komputer,

Proses pemasangan sistem win10 tersekat, apakah yang perlu saya lakukan? Proses pemasangan sistem win10 tersekat, apakah yang perlu saya lakukan? Dec 28, 2023 pm 02:04 PM

Apabila kita mengemas kini atau memasang sistem win10, kadangkala kita mungkin menghadapi situasi di mana kemajuan tersekat di tengah dan berhenti secara tiba-tiba. Dalam kes ini, editor percaya bahawa mungkin terdapat sebab rangkaian di latar belakang yang menghalang kemas kini daripada meneruskan dengan lancar Anda hanya perlu menunggu rangkaian pulih. Atau mungkin terdapat ralat dalam sistem itu sendiri semasa proses mengemas kini dan memasang sistem. Mari kita lihat penyelesaian khusus dengan editor ~ Apa yang perlu dilakukan jika sistem win10 tersekat >>>Desktop Rainforest Woodwind win1064-bit muat turun sistem<<<>>>Desktop Rainforest Woodwind win1032-bit muat turun sistem <<<> >>>Hujan Notebook

Apakah yang perlu saya lakukan jika WPS saya tersekat dan saya tidak mempunyai masa untuk menyimpannya? Apakah yang perlu saya lakukan jika WPS saya tersekat dan saya tidak mempunyai masa untuk menyimpannya? Mar 20, 2024 pm 07:01 PM

WPS ialah perisian pejabat kami yang biasa digunakan Ia sangat berkuasa dan mudah dikendalikan. Tetapi kadang-kadang apabila kita menggunakannya, kita akan menghadapi situasi di mana wps tersekat Terdapat banyak sebab untuk ini, dan apa yang harus kita lakukan dengan dokumen yang kita tidak simpan selepas tersekat, saya akan beri anda Mari analisa sebab: Situasi 1. Apa yang perlu dilakukan jika WPS tersekat. 1. Buka "Menu Mula", cari WPS2, dan buka alat wpsoffice 3. Klik alat konfigurasi di bawah alat wpsoffice 4. Selepas membuka alat konfigurasi, klik Lanjutan 6. Selain itu: Nyahtanda tiga kotak berikut dalam tetapan keserasian untuk menghalang dokumen yang disimpan daripada dibuka oleh WPS secara lalai.

Kemas kini Win10 2004 ranap pada 91%, bagaimana untuk menanganinya? Kemas kini Win10 2004 ranap pada 91%, bagaimana untuk menanganinya? Dec 28, 2023 pm 01:11 PM

Apabila kami menggunakan sistem pengendalian versi win102004, sesetengah rakan mungkin menghadapi situasi di mana kemajuan tersekat pada 91% dan kekal tidak bergerak semasa proses kemas kini sistem. Mengenai masalah ini, saya fikir ia mungkin disebabkan oleh rangkaian atau sistem kami. Anda boleh terlebih dahulu menyelesaikan masalah yang sepadan dalam sistem anda sendiri dan kemudian menyelesaikan masalah dengan cara yang disasarkan. Mari kita lihat langkah terperinci untuk melihat bagaimana editor melakukannya~ Apa yang perlu dilakukan jika kemas kini win102004 tersekat pada 91%. 2. Atau tekan butang restart untuk memulakan semula Apabila boot Iogo, tekan ctrl+shift+f33 dan anda boleh memasukkan kebarangkalian yang tinggi, tetapi terdapat beberapa pengecualian.

Apakah yang perlu saya lakukan jika WPS tiba-tiba tersekat dan tidak boleh keluar tetapi tiada fail disimpan? Apakah yang perlu saya lakukan jika WPS tiba-tiba tersekat dan tidak boleh keluar tetapi tiada fail disimpan? Mar 13, 2024 pm 06:07 PM

Apakah yang perlu saya lakukan jika WPS tiba-tiba tersekat dan tidak boleh keluar tetapi tiada fail disimpan? WPS adalah alat pejabat yang sering kita gunakan dalam kehidupan seharian kita Namun, apabila menggunakannya, pengguna sering mendapati bahawa WPS tiba-tiba tersekat dan tidak boleh keluar, tetapi apakah yang perlu kita lakukan jika kita tidak menyimpan fail? Biarkan tapak ini dengan teliti memperkenalkan kepada pengguna penyelesaian kepada masalah ini. Apakah yang perlu saya lakukan jika WPS tiba-tiba tersekat dan tidak boleh keluar tetapi tiada fail disimpan? Kaedah 1: 1. Mula-mula hidupkan komputer dan klik dua kali untuk membuka dokumen perkataan. 2. Kemudian klik Fail. 3. Kemudian klik Urus Dokumen. 4. Kemudian klik Pulihkan Dokumen Tidak Disimpan. 5. Kemudian klik untuk memilih dokumen kami yang belum disimpan, dan kemudian

Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur Panduan Reka Letak HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Reka Letak Berbilang Lajur Oct 27, 2023 pm 03:24 PM

Panduan Susun Atur HTML: Cara Menggunakan Elemen Terapung untuk Melaksanakan Susun Atur Berbilang Lajur Semasa menyemak imbas halaman web, kita sering melihat reka letak yang terdiri daripada berbilang lajur, seperti halaman utama laman web berita, halaman paparan produk, dsb. Reka letak berbilang lajur ini menjadikan halaman web lebih teratur dan cantik dengan membahagikan kandungan kepada lajur dan memaparkannya bersebelahan. Dalam HTML, kita boleh menggunakan elemen terapung untuk mencapai susun atur berbilang lajur sedemikian. Artikel ini akan menunjukkan kepada anda cara menggunakan elemen terapung untuk melaksanakan reka letak berbilang lajur dan memberikan contoh kod khusus. Konsep asas dalam menggunakan elemen terapung untuk melaksanakan susun atur berbilang lajur

See all articles