清除浮动的方法有哪些
清除浮动的方法有clearboth的方法、设置clearfix的方法、overflow的方法以及给父元素设置双伪元素的方法
在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示，接下来在文章中将为大家详细介绍几种清除浮动的方法，具有一定的参考价值，希望对大家有所帮助。
【推荐课程：CSS课程】
浮动导致的后果：
（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置
（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示
例：在一个div中设置三个div，让三个div的来撑开父元素
<style>
.box{border:1px solid #ccc;background:pink;}
.red{width:100px;height:100px;background: red;}
.green{width:100px;height:100px;background:green;}
.blue{width:100px;height:100px;background: blue;}
</style>
<body>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>效果图：
加了float:left之后，父元素无法被撑开
清除浮动的方法
（1）使用clear:both清除浮动
在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护
<div style="clear: both"></div>
（2）利用伪元素clearfix来清除浮动
给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的
.clearfix:after{
content:"";
display:block;
visibility:hidden;
clear:both;
}（3）overflow方法的使用
当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果
.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}（4）双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}总结：以上就是本篇文章的全部内容了，希望通过这篇文章能够让大家对清除浮动的方法有所了解
Atas ialah kandungan terperinci 清除浮动的方法有哪些. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apakah nilai maksimum terapung?
Oct 11, 2023 pm 05:54 PM
Nilai maksimum apungan: 1. Dalam bahasa C, nilai maksimum apungan ialah 3.40282347e+38 Menurut piawaian IEEE 754, eksponen maksimum jenis apungan ialah 127, dan bilangan digit mantissa ialah 23. Dengan cara ini, nombor titik terapung maksimum ialah 3.40282347 e+38. Dalam bahasa Java, nilai apungan maksimum ialah 3.4028235E+38. Dalam bahasa Python, nilai apungan maksimum ialah 1.7976931348623157e+308;
Apakah ketepatan apungan?
Oct 17, 2023 pm 03:13 PM
Ketepatan apungan boleh mencapai 6 hingga 9 tempat perpuluhan. Menurut piawaian IEEE754, bilangan digit bererti yang boleh diwakili oleh jenis apungan adalah lebih kurang 6 hingga 9 digit. Perlu diingatkan bahawa ini hanyalah ketepatan maksimum teori Dalam penggunaan sebenar, disebabkan ralat pembundaran nombor titik terapung, ketepatan jenis apungan selalunya lebih rendah. Apabila melakukan operasi nombor titik terapung dalam komputer, kehilangan ketepatan mungkin berlaku disebabkan oleh had ketepatan nombor titik terapung. Untuk meningkatkan ketepatan nombor titik terapung, anda boleh menggunakan jenis data ketepatan yang lebih tinggi, seperti dua kali ganda atau panjang.
Apakah maksud float dalam bahasa C?
Oct 12, 2023 pm 02:30 PM
Terapung dalam bahasa C ialah jenis data yang digunakan untuk mewakili nombor titik terapung ketepatan tunggal Nombor titik terapung ialah nombor nyata yang diwakili dalam tatatanda saintifik dan boleh mewakili nilai yang sangat besar atau sangat kecil. Pembolehubah jenis apungan boleh menyimpan nilai dengan 6 digit bererti selepas titik perpuluhan Dalam bahasa C, jenis apungan boleh digunakan untuk mengendalikan dan menyimpan nombor titik apungan boleh digunakan untuk mewakili perpuluhan, pecahan, saintifik tatatanda, dsb. yang memerlukan perwakilan tepat, tidak seperti jenis integer, nombor titik terapung boleh mewakili nombor selepas titik perpuluhan, dan boleh melakukan empat operasi aritmetik pada perpuluhan.
Apakah yang termasuk float32 bait?
Oct 10, 2023 pm 04:07 PM
Bait float32 termasuk bit tanda, bit eksponen dan bit mantissa, dan digunakan untuk mewakili nombor titik terapung 32-bit. Pengenalan terperinci: 1. Bit tanda (1 bit), digunakan untuk mewakili tanda nombor, 0 mewakili nombor positif, 1 mewakili nombor negatif 2. Bit eksponen (8 bit), digunakan untuk mewakili bahagian eksponen a nombor titik terapung, melalui bit eksponen , anda boleh melaraskan julat saiz nombor titik terapung 3. Bit mantissa (23 bit) digunakan untuk mewakili bahagian mantissa nombor titik terapung, dan bit mantissa menyimpan; bahagian perpuluhan nombor titik terapung. Bit tanda menentukan tanda nombor titik terapung, dan bit eksponen dan bit mantissa bersama-sama menentukan saiz dan ketepatan nombor titik terapung.
Apakah panjang apungan pangkalan data?
Oct 10, 2023 pm 03:57 PM
Panjang apungan pangkalan data biasa ialah: 1. Panjang jenis apungan dalam MySQL boleh menjadi 4 bait atau 8 bait 2. Panjang jenis apungan dalam Oracle boleh 4 bait atau 8 bait. , Panjang jenis apungan dalam SQL Server ditetapkan pada 8 bait 4. Panjang jenis apungan dalam PostgreSQL boleh menjadi 4 bait atau 8 bait, dsb.
Apakah masalah yang akan menyebabkan susun atur terapung?
Oct 10, 2023 pm 03:31 PM
Reka letak terapung boleh menyebabkan masalah seperti mengosongkan terapung, masalah pertindihan elemen, masalah pembalut teks dan masalah reka letak responsif. Pengenalan terperinci: 1. Kosongkan masalah terapung Apabila menggunakan susun atur terapung, elemen terapung akan terlepas daripada aliran dokumen, yang mungkin menyebabkan bekas induk tidak dapat membungkus elemen terapung dengan betul bekas induk akan runtuh, menyebabkan kekacauan reka letak;
Apakah nilai atribut float?
Oct 10, 2023 pm 02:03 PM
Nilai atribut apungan termasuk kiri, kanan, tiada, warisi, clearinline-start dan inline-end. Pengenalan terperinci: 1. kiri, elemen terapung ke kiri, iaitu, elemen akan berada sedekat mungkin dengan sebelah kiri bekas, dan elemen lain akan mengelilinginya di sebelah kanan 2. kanan, elemen terapung ke kanan, iaitu, elemen akan berada sedekat mungkin dengan bekas Di sebelah kanan, elemen lain akan mengelilinginya di sebelah kiri 3. Nilai lalai tiada, elemen tidak akan terapung, dan akan disusun mengikut aliran dokumen biasa, dsb.
Apakah maksud float=0?
Oct 13, 2023 pm 04:14 PM
float=0 ialah jenis pembolehubah dalam bahasa pengaturcaraan yang mewakili nombor titik terapung (iaitu, perpuluhan). float=0 bermaksud untuk menetapkan nilai awal pembolehubah titik terapung kepada 0. Nombor titik terapung digunakan secara meluas dalam pengaturcaraan komputer untuk mewakili dan memproses data pengukuran dunia sebenar. Dalam banyak bahasa pengaturcaraan, float ialah jenis data yang digunakan untuk menyimpan dan beroperasi pada nombor nyata Dalam jenis pembolehubah ini, nombor titik terapung diwakili sebagai urutan nombor sebelum dan selepas titik perpuluhan, dan boleh mengandungi titik perpuluhan. dan bahagian Indeks pilihan.
