如何清楚浮动（一）
已知一个大的div容器，这个容器包含了两个子div容器，然后在这两个子div容器的后面再添加一个div(这个div表示清除浮动的div容器)，清楚浮动的div容器设置css样式为clear:both，此时，大的div标签的内部(左右两边/*css5*/)浮动就清除了。
如果有一个大的div容器2664b5c137162ed32cb2c4b60e3a831f 16b28748ea4df4d9c2150843fecfba68 ，这个大的div包含了一个子div容器4cd6539b02a5cf52b7697d7aec70ae5416b28748ea4df4d9c2150843fecfba68，子div容器设置一个宽度、高度、背景色，不设置内、外边距以及浮动，此时子div容器默认居左，这时子div居左是浮动(float)继承浏览器的属性，不具有布局的作用。然后我们设置这个子div容器的浮动，让它居左float:left；我发现设置了浮动居左float:left，子div容器产生了浮动，子div容器离大div容器顶部有一定距离。
<body>
<div class="divcss5">
<div class="clear"></div>
<!--<div class="clear eft"></div>
<div class="clear ight"></div>-->
</div>
</body>浮动有margin属性
然后我margin-top:10px, 子div容器在原有的基础上向下移动了10px的距离，也就是说，浮动不会影响margin-top属性应有的偏移量，同理也不会影响margin-left、margin-right、margin-bottom属性应有的偏移量。
浮动没有top，left，right，bottom属性
然后，现在我删掉margin-top:10px;，给子div容器设置top:10px，发现纵坐标并没有发生偏移，也就是是说浮动并没有top属性。同理也就没有left、right、bottom属性。
那么，在什么情况下设置top、left、right、bottom的属性才能对浮动起作用呢？
浮动有top，left，right，bottom属性(条件设置相对位置position)
于是，我给子div容器加了相对位置position:relative，接着设置top:10px，突然发现子div容器向下偏移了10px。
继续在子div浮动的状态，给它设置position:relative;，接着给它设置margin-left:10px;，看到子div容器的位置水平向右发生了10px的偏移量，同理margin-top、margin-right、margin-bottom都会改变。
也就是说，当給子div容器设置浮动float:left，接着设置margin-left会起作用，设置top是没有作用。只有给子div容器设置相对位置position的时候，top才能在浮动的状态下起作用，那么是不是说left，top是在相对位置的时候，才能起作用呢？那么现在我们就做一个实验，我在子div容器里把float:left;position:relative;都删掉，不会有浮动，也不会有相对位置，然后写上top:10px;left:10px;相应的css代码如下.clear{width: 200px;background: #f2e;color:#030617;height: 20px;top:50px;left:10px;};，结果是子div容器根本没有在横、纵轴移动过位置，所以事实证明left、top是在设置了相对位置position的时候才起作用。margin就是不管你设置position与不设置position都会起作用。
继续上面的float浮动，如果现在给float设置inherit;继承浏览器的浮动属性，此时我们看子div是不浮动的，默认居左。同样的給子div设置浮动样式 none initial也不会有浮动作用。只有給子div容器设置了left和right的浮动，子div容器才会出现浮动状态。
如何清楚浮动（二）
下面，我们用一种其他的方法来清除浮动，HTML代码还是以上的代码，大容器的div的css代码：.divcss5{padding:10px 0;width: 100%; left: 50%;right: 50%;background: #007CB5;}，子div容器的css代码：.clear{width: 200px;background: #f2e;color:#030617;height: 20px;float:left;}，此时看到的是浮动的效果，子div容器浮在大容器上面，同样的原理，我还是用清除浮动clear:both；我们可以用css伪元素:after，下面就是一个很简单的css代码，给父容器写css伪类，代码：.divcss5:after{content: "1";clear: both;display: block;}，此时，我们看到的是，清除了大容器的浮动，并且在浏览器上能看到子div容器被包含在了大div容器内部。在浏览器上查看元素，可以看到after包含在了父容器内，所以，after相当于在给父容器内部加一个清楚浮动的div，只是少了一个div层，这个层被.divcss5:after实现了。
Atas ialah kandungan terperinci div+css浮动的解决方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Bagaimana kami menandakan font Google dan mencipta goofonts.comApr 12, 2025 pm 12:02 PMGoofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google
Artikel Web Dev yang tidak berkesudahanApr 12, 2025 am 11:44 AMPavithra Kodmad meminta orang ramai untuk membuat cadangan mengenai apa yang mereka fikir adalah beberapa artikel yang paling abadi mengenai pembangunan web yang telah mengubahnya
Perjanjian dengan elemen seksyenApr 12, 2025 am 11:39 AMDua artikel diterbitkan pada hari yang sama:
Amalkan pertanyaan GraphQL dengan keadaan API JavaScriptApr 12, 2025 am 11:33 AMBelajar bagaimana untuk membina API GraphQL boleh menjadi agak mencabar. Tetapi anda boleh belajar cara menggunakan API GraphQL dalam 10 minit! Dan ia berlaku saya ' ve mendapat yang sempurna
CMSS peringkat komponenApr 12, 2025 am 11:09 AMApabila komponen tinggal di persekitaran di mana pertanyaan data memisahkannya tinggal berdekatan, terdapat garis langsung yang cukup antara komponen visual dan
Tetapkan jenis pada bulatan ... dengan laluan mengimbangiApr 12, 2025 am 11:00 AMDi sini ' s beberapa CSS Trickery dari Yuanchuan. Terdapat CSS Property Offset-Path. Suatu ketika dahulu, ia dipanggil gerakan-jalan dan kemudian ia dinamakan semula. I
Apa yang 'kembali' lakukan dalam CSS?Apr 12, 2025 am 10:59 AMMiriam Suzanne menerangkan dalam video pemaju Mozilla mengenai subjek.
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver Mac版
Alat pembangunan web visual
Versi Mac WebStorm
Alat pembangunan JavaScript yang berguna
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
