CSS中清除浮動(dòng)的幾種方法，快來(lái)學(xué)習(xí)一下吧

言

首先我們通過(guò)一張圖來(lái)解釋下元素浮動(dòng)是什么樣的狀態(tài)。

元素浮動(dòng)情況

上圖的html部分代碼為：

html代碼

css部分代碼為：

css代碼

通過(guò)上面的圖片可以看出，當(dāng)內(nèi)部的div設(shè)置float后，外部的元素的就會(huì)受到以下影響：

背景不能顯示
邊框不能被撐開(kāi)
margin和padding設(shè)置的值不能正確顯示

元素浮動(dòng)的壞處

如果不清除元素浮動(dòng)的話(huà)，浮動(dòng)層后面的非浮動(dòng)層內(nèi)容就有可能被覆蓋，造成頁(yè)面的排版混亂。

例如在上面的例子中再加一個(gè)非浮動(dòng)的div，就會(huì)發(fā)現(xiàn)該div被前面的三個(gè)浮動(dòng)div覆蓋住。

因?yàn)楦?dòng)，后面的div被覆蓋

既然會(huì)出現(xiàn)這種情況，我們就應(yīng)該設(shè)法清除掉元素的浮動(dòng)。

方法1-父級(jí)元素設(shè)定定高

我們可以給父級(jí)元素.outer設(shè)置為定高，這樣就可以不影響后面的非浮動(dòng)元素。.outer的樣式為：

設(shè)置定高

達(dá)到的效果為

清楚浮動(dòng)之后

雖然這種方法可以清楚浮動(dòng)，但是對(duì)父元素設(shè)置定高會(huì)有很多的限制，如果內(nèi)層div的高度變化，則需要手動(dòng)修改外層div的高度，相對(duì)來(lái)說(shuō)有點(diǎn)麻煩，因此這種方法并不推薦。

方法2-添加新元素，設(shè)置clear:both

在父元素內(nèi)部的末尾處添加一個(gè)新的div，并設(shè)置其clear: both;屬性。

添加一個(gè)新的div

該新增div的css屬性為：

新增div的css屬性

利用該方法同樣可以達(dá)到清楚浮動(dòng)的效果，但是由于會(huì)新增DOM元素，這種方法也不推薦。

方法3-父級(jí)元素使用overflow:hidden屬性

在父級(jí)元素上使用overflow:hidden屬性，準(zhǔn)確來(lái)說(shuō)只要不給overflow屬性設(shè)置為visible都可以清除元素浮動(dòng)。

設(shè)置overflow: hidden

使用這種方法可以少寫(xiě)很多css樣式代碼，同時(shí)不會(huì)新增DOM元素，因此推薦使用這種方式。

方法4-對(duì)父元素使用偽元素

通過(guò)對(duì)父元素使用:after偽元素，同樣可以達(dá)到清除浮動(dòng)的效果。

偽元素清楚浮動(dòng)

以上方法在偽元素中，通過(guò)設(shè)置clear與overflow屬性來(lái)實(shí)現(xiàn)。方法4在實(shí)際的項(xiàng)目中使用的頻率最高，因此極大的推薦使用方法4來(lái)清除元素浮動(dòng)。

其他方法

看到網(wǎng)上有的資料介紹，通過(guò)設(shè)置父元素為浮動(dòng)，或者設(shè)置父元素為absolute定位，這兩種方法只是能顯示父元素而已，但父元素同樣會(huì)覆蓋到后面的非浮動(dòng)元素，因此這兩種方法嚴(yán)格意義來(lái)說(shuō)并不算清除浮動(dòng)的方法。

總結(jié)

今天這篇文章主要介紹了幾種通過(guò)CSS來(lái)清除元素浮動(dòng)的方法，你掌握了嗎？

天這篇文章給大家介紹3種CSS清除浮動(dòng)的方法。有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。

首先，這里就不講為什么我們要清楚浮動(dòng)，反正不清除浮動(dòng)事多多。

下面我就講3種常用清除浮動(dòng)的方法，夠用了。

1、在浮動(dòng)元素后面加一個(gè)空的div，并為它清除浮動(dòng)

html代碼：

<div class="wrap">   <div class="float">浮動(dòng)</div>   <div class="clear"></div>   <div class="nofloat">不想被浮動(dòng)影響</div></div>

css代碼：

.wrap{  width:500px;  height:400px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;}

現(xiàn)在雖然加了一個(gè)空的div，但是并沒(méi)有給它清除浮動(dòng)，所以目前的效果就是第三個(gè)子元素.nofloat還是收到浮動(dòng)的影響。

OK，現(xiàn)在給.clear加上清除浮動(dòng)：

.clear{    clear:both;}

刷新一下效果就出來(lái)了：

PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動(dòng)的影響。

2、利用BFC特性清除浮動(dòng)

html代碼：

<div class="wrap">   <div class="float">浮動(dòng)</div>   <div class="nofloat">不想被浮動(dòng)影響</div></div>

css代碼：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;  overflow:hidden;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}.nofloat{    width:300px;    height:150px;    background:red;    overflow:hidden;}

效果是這樣的：

這里父容器是沒(méi)有設(shè)置固定高度的，本來(lái)第一個(gè)子元素浮動(dòng)之后，父元素的高度會(huì)塌陷到跟第二個(gè)子元素一樣高，但由于這里分別給第二個(gè)子元素和父元素都設(shè)置了overflow:hidden ，所以它們都生成了一個(gè)新的BFC區(qū)域，根據(jù)上文提供的BFC布局規(guī)則可以得知：BFC區(qū)域不會(huì)與float box 重疊；計(jì)算BFC高度時(shí)浮動(dòng)元素的高度也參與計(jì)算。

所以就得到清除浮動(dòng)的效果。說(shuō)得比較繞，但其實(shí)清除浮動(dòng)得根據(jù)自己開(kāi)發(fā)中的實(shí)際情況合理使用。

3、使用：after偽元素，給浮動(dòng)元素的父元素清除浮動(dòng)

html代碼：

<div class="wrap">   <div class="float">浮動(dòng)</div></div>

css代碼：

.wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}

此時(shí)子元素浮動(dòng)了，脫離了文檔流，所以父元素高度酒塌陷了：

可以看到父元素的邊框擠在一起了。

OK，現(xiàn)在給父元素添加一個(gè)clearfix類(lèi)：

<div class="wrap clearfix">   <div class="float">浮動(dòng)</div></div>

.clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}

現(xiàn)在刷新后的效果就是：

這種方法和BFC清除浮動(dòng)個(gè)人用的比較多，實(shí)際開(kāi)發(fā)中，其實(shí)這兩種就夠用了。

好的，清除浮動(dòng)我也就簡(jiǎn)單地提到這里！

以上就是CSS清除浮動(dòng)的幾種方法的詳細(xì)內(nèi)容。如果有什么錯(cuò)誤的話(huà)，歡迎留言指正。

動(dòng)的目的：把多個(gè)盒子放在一行上

清除浮動(dòng)的目的：解決父盒子高度為0的問(wèn)題

清除浮動(dòng)，也稱(chēng)閉合浮動(dòng)

注：本文不兼容IE6

未清除浮動(dòng)實(shí)現(xiàn)情況：

圖1

清除后：

圖2

原代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

具體方法：

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

在含浮動(dòng)標(biāo)簽后加兄弟盒子清除浮動(dòng)

例：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：添加了許多空div

2.給父盒子overflow:hidden

觸發(fā)bfc模式（該名詞不懂請(qǐng)谷歌/百度，初學(xué)者可暫時(shí)略過(guò))，直接清除浮動(dòng)

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

overflow: hidden;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：不可與position屬性配合使用

3.偽元素法

給父元素定義偽類(lèi):after(此處使用的是公共類(lèi)clearfix）

復(fù)制代碼

.clearfix:after{

content:"";/*內(nèi)容為空*/

visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/

display:block;/*變成塊級(jí)元素*/

height:0;

clear:both;/*清除浮動(dòng)*/

}

復(fù)制代碼

具體代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:after{

content:"";/*內(nèi)容為空*/

visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁(yè)中該占的位置還是占著*/

display:block;/*變成塊級(jí)元素*/

height:0;

clear:both;/*清除浮動(dòng)*/

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

缺點(diǎn)：IE8以上和非IE瀏覽器才支持

4.雙偽元素法

給父類(lèi)加上偽類(lèi):before和:after

復(fù)制代碼

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

復(fù)制代碼

具體代碼：

復(fù)制代碼

<!DOCTYPE html>

<html>

<head>

.clearfix:before,.clearfix:after{

content:"";

display:table;

}

.clearfix:after{

clear:both;

}

.content{

width:960px;

margin:100px auto;

border: 1px solid #ccc;

}

.left{

width:400px;

height: 200px;

background-color: green;

float: left;

}

.right{

width: 400px;

height: 200px;

background-color: red;

float: right;

}

.clearbox{

clear:both;

}

</style>

</head>

<body>

</div>

</body>

</html>

復(fù)制代碼

附：

對(duì)于上述4種方法，優(yōu)先推薦方法3和4，當(dāng)然1和2也可，可根據(jù)具體情況使用。

還有幾種亂七八糟的清除浮動(dòng)方法，但是缺點(diǎn)多，故不提起.

最后你覺(jué)得我們的文章對(duì)你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學(xué)習(xí)資料，在評(píng)論下方可以關(guān)注我的學(xué)習(xí)群，你可以隨時(shí)在上面向我們提問(wèn)，把你在學(xué)習(xí)前端過(guò)程中所遇到的問(wèn)題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問(wèn)題，希望久伴可以伴隨你從入門(mén)到專(zhuān)家。

在線咨詢(xún)

上一篇：計(jì)時(shí)器掌控者的獲取方法及使用
下一篇：HTML5 向網(wǎng)頁(yè)嵌入視頻和音頻

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

CSS中清除浮動(dòng)的幾種方法，快來(lái)學(xué)習(xí)一下吧

言

元素浮動(dòng)的壞處

方法1-父級(jí)元素設(shè)定定高

方法2-添加新元素，設(shè)置clear:both

方法3-父級(jí)元素使用overflow:hidden屬性

方法4-對(duì)父元素使用偽元素

其他方法

總結(jié)

您的項(xiàng)目需求