清除浮動的方法有哪些

來源：懂視網(wǎng) 責(zé)編：小OO 時間：2020-11-02 22:13:45

清除浮動的方法有哪些

在我們寫代碼的時候，有時因為使用了float浮動元素而導(dǎo)致頁面中某些元素不能正確的顯示，接下來在文章中將為大家詳細(xì)介紹幾種清除浮動的方法，具有一定的參考價值，希望對有所幫助。【推薦課程：CSS課程】。浮動導(dǎo)致的后果。（1）由于浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素。（2）與浮動元素同級的非浮動元素會跟隨其后，因為浮動元素脫離文檔流不占據(jù)原來的位置。（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結(jié)構(gòu)顯示。例：在一個div中設(shè)置三個div，讓三個div的來撐開父元素。

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀在我們寫代碼的時候，有時因為使用了float浮動元素而導(dǎo)致頁面中某些元素不能正確的顯示，接下來在文章中將為大家詳細(xì)介紹幾種清除浮動的方法，具有一定的參考價值，希望對有所幫助。【推薦課程：CSS課程】。浮動導(dǎo)致的后果。（1）由于浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素。（2）與浮動元素同級的非浮動元素會跟隨其后，因為浮動元素脫離文檔流不占據(jù)原來的位置。（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結(jié)構(gòu)顯示。例：在一個div中設(shè)置三個div，讓三個div的來撐開父元素。

清除浮動的方法有clearboth的方法、設(shè)置clearfix的方法、overflow的方法以及給父元素設(shè)置雙偽元素的方法

在我們寫代碼的時候，有時因為使用了float浮動元素而導(dǎo)致頁面中某些元素不能正確的顯示，接下來在文章中將為大家詳細(xì)介紹幾種清除浮動的方法，具有一定的參考價值，希望對大家有所幫助。

【推薦課程：CSS課程】

浮動導(dǎo)致的后果：

（1）由于浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其后，因為浮動元素脫離文檔流不占據(jù)原來的位置
（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結(jié)構(gòu)顯示

例：在一個div中設(shè)置三個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之后，父元素?zé)o法被撐開

清除浮動的方法

（1）使用clear:both清除浮動

在代碼中在放一個空的div標(biāo)簽，然后給這個標(biāo)簽設(shè)置clear:both來清除浮動對頁面的影響。它的優(yōu)點是簡單，方便兼容性好，但是一般情況下不建議使用該方法，因為會造成結(jié)構(gòu)混亂，不利于后期維護(hù)

<div style="clear: both"></div>

（2）利用偽元素clearfix來清除浮動

給父級元素添加了一個:after偽元素，通過清除偽元素的浮動，達(dá)到撐起父元素高度的目的

.clearfix:after{
 content:"";
 display:block;
 visibility:hidden;
 clear:both;
 }

（3）overflow方法的使用

當(dāng)給父元素設(shè)置了overflow樣式，不管是overflow:hidden或overflow:auto都可以清除浮動只要它的值不為visible就可以了，它的本質(zhì)就是建構(gòu)了一個BFC，這樣使得達(dá)到撐起父元素高度的效果

.box{border:1px solid #ccc;background:#eff2f4;overflow: auto}

（4）雙偽元素方法的使用

通過給父元素設(shè)置雙偽元素來達(dá)到清除浮動的效果

 .clearfix:before,.clearfix:after {
 content: "";
 display: block;
 clear: both;
}

總結(jié)：

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

清除浮動的方法有哪些

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：方法清除有哪些方法

熱門焦點

清除浮動的方法有哪些

清除浮動的方法有哪些

清除浮動的方法有哪些

最新推薦

猜你喜歡

熱門推薦