3種CSS清除浮動(dòng)的方法

（給前端大學(xué)加星標(biāo)，提升前端技能.）

作者：html中文網(wǎng)

https://www.html.cn/web/css/19613.html

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

首先，這里就不講為什么我們要清楚浮動(dòng)，反正不清除浮動(dòng)事多多。下面我就講3種常用清除浮動(dòng)的方法，夠用了。1、在浮動(dòng)元素后面加一個(gè)空的div，并為它清除浮動(dòng)html代碼：

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

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，但是并沒有給它清除浮動(dòng)，所以目前的效果就是第三個(gè)子元素.nofloat還是收到浮動(dòng)的影響。

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

.clear{    clear:both;}

刷新一下效果就出來了：

PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動(dòng)的影響。2、利用BFC特性清除浮動(dòng)html代碼：

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

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;}

效果是這樣的：

這里父容器是沒有設(shè)置固定高度的，本來第一個(gè)子元素浮動(dòng)之后，父元素的高度會塌陷到跟第二個(gè)子元素一樣高，但由于這里分別給第二個(gè)子元素和父元素都設(shè)置了overflow:hidden ，所以它們都生成了一個(gè)新的BFC區(qū)域，根據(jù)上文提供的BFC布局規(guī)則可以得知：BFC區(qū)域不會與float box 重疊；計(jì)算BFC高度時(shí)浮動(dòng)元素的高度也參與計(jì)算。所以就得到清除浮動(dòng)的效果。說得比較繞，但其實(shí)清除浮動(dòng)得根據(jù)自己開發(fā)中的實(shí)際情況合理使用。3、使用：after偽元素，給浮動(dòng)元素的父元素清除浮動(dòng)html代碼：

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類：

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í)際開發(fā)中，其實(shí)這兩種就夠用了。好的，清除浮動(dòng)我也就簡單地提到這里！以上就是CSS清除浮動(dòng)的幾種方法的詳細(xì)內(nèi)容。如果有什么錯(cuò)誤的話，歡迎留言指正。

分享前端好文，點(diǎn)亮?在看?