這篇文章給大家分享的是有關(guān)css中為什么要清除浮動(dòng)的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)不只是一家網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司；我們對營銷、技術(shù)、服務(wù)都有自己獨(dú)特見解，公司采取“創(chuàng)意+綜合+營銷”一體化的方式為您提供更專業(yè)的服務(wù)！我們經(jīng)歷的每一步也許不一定是最完美的，但每一步都有值得深思的意義。我們珍視每一份信任，關(guān)注我們的成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站質(zhì)量和服務(wù)品質(zhì)，在得到用戶滿意的同時(shí)，也能得到同行業(yè)的專業(yè)認(rèn)可，能夠?yàn)樾袠I(yè)創(chuàng)新發(fā)展助力。未來將繼續(xù)專注于技術(shù)創(chuàng)新，服務(wù)升級，滿足企業(yè)一站式成都營銷網(wǎng)站建設(shè)需求，讓再小的品牌網(wǎng)站制作也能產(chǎn)生價(jià)值！

一、理解清除浮動(dòng)

1、為什么要清除浮動(dòng)

我們前面說過，浮動(dòng)本質(zhì)是用來做一些文字混排效果的，但是被我們拿來做布局用，則會(huì)有很多的問題出現(xiàn)。

由于浮動(dòng)元素不再占用原文檔流的位置，所以它會(huì)對后面的元素排版產(chǎn)生影響，為了解決這些問題，此時(shí)就需要在該元素中清除浮動(dòng)。

準(zhǔn)確地說，并不是清除浮動(dòng)，而是清除浮動(dòng)后造成的影響

2、清除浮動(dòng)本質(zhì)

清除浮動(dòng)的本質(zhì):主要為了解決父級元素因?yàn)樽蛹壐?dòng)引起內(nèi)部高度為0的問題。

我們來詳細(xì)解釋下這句話

再解釋下就是在標(biāo)準(zhǔn)流下面一個(gè)父p沒有設(shè)置高度屬性,那么它的高度就會(huì)被子元素的高度撐開。但是如果這個(gè)父p中的子元素是浮動(dòng)的話，如果父p下面再有

一個(gè)兄弟p，那么這個(gè)兄弟p就會(huì)遮擋這個(gè)父元素。這個(gè)現(xiàn)象也叫浮動(dòng)溢出。

示例

父p

子p

子p

兄弟p

運(yùn)行結(jié)果

很明顯這里，p1和p2已經(jīng)上浮，而兄弟p就往上移動(dòng)。這里因?yàn)楦竝有文字所以占了點(diǎn)高度，不然兄弟p會(huì)完全覆蓋父p。

當(dāng)然我們可以通過設(shè)置父p的高度，來使它不被兄弟p所覆蓋。比如這里設(shè)置height:200px;

在刷新下頁面

當(dāng)父p設(shè)置高度后，被覆蓋的問題卻是解決了，但在很多時(shí)候我們是不會(huì)去設(shè)置父p的高度，因?yàn)楹芏鄷r(shí)候我們都不知道父p的高度要設(shè)置多少。

所以這個(gè)時(shí)候需要思考解決這個(gè)問題。

二、清除浮動(dòng)的方法

清除浮動(dòng)的方法本質(zhì):就是把父盒子里浮動(dòng)的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用于清除浮動(dòng)。

基本語法格式

選擇器{clear:屬性值;}

屬性值

1、額外標(biāo)簽法

通過在浮動(dòng)元素末尾添加一個(gè)空的標(biāo)簽，例如

我們在上面的代碼添加

父p

子p

子p

兄弟p

運(yùn)行結(jié)果

完美解決了。

優(yōu)點(diǎn)通俗易懂，書寫方便。

缺點(diǎn)添加無意義的標(biāo)簽，結(jié)構(gòu)化較差。

2、父級添加overflow屬性方法

可以通過觸發(fā)BFC的方式，可以實(shí)現(xiàn)清除浮動(dòng)效果。（BFC后面會(huì)講）

可以給父級元素添加：overflow為hidden|auto|scroll都可以實(shí)現(xiàn)。

我們將上面代碼修改為

父p

子p

子p

兄弟p

也是能實(shí)現(xiàn)去除浮動(dòng)的效果。

優(yōu)點(diǎn)代碼簡潔

缺點(diǎn)內(nèi)容增多時(shí)候容易造成不會(huì)自動(dòng)換行導(dǎo)致內(nèi)容被隱藏掉，無法顯示需要溢出的元素。

3、使用after偽元素清除浮動(dòng)

:after方式為空元素的升級版，好處是不用單獨(dú)加標(biāo)簽了**

示例

優(yōu)點(diǎn)符合閉合浮動(dòng)思想結(jié)構(gòu)語義化正確

缺點(diǎn)由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。

注意：content:"."里面盡量跟一個(gè)小點(diǎn)，或者其他，盡量不要為空，否則再firefox7.0前的版本會(huì)有生成空格。

4、使用before和after雙偽元素清除浮動(dòng)

使用方法將上面的clearfix樣式替換成如下

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.clearfix{

*zoom:1;

}

優(yōu)點(diǎn)代碼更簡潔

缺點(diǎn)由于IE6-7不支持:after，使用zoom:1觸發(fā)hasLayout。

5、總結(jié)

1、在網(wǎng)頁主要布局時(shí)使用:after偽元素方法并作為主要清理浮動(dòng)方式.文檔結(jié)構(gòu)更加清晰；

2、在小模塊如ul里推薦使用overflow:hidden;（同時(shí)留意可能產(chǎn)生的隱藏溢出元素問題）；

感謝各位的閱讀！關(guān)于“css中為什么要清除浮動(dòng)”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！