CSS清除浮動的幾種方法

來源 | https://www.html.cn/web/css/19613.html

今天這篇文章給大家介紹一下CSS清除浮動的幾種方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。首先這裡就不講為什麼我們要清楚浮動，反正不清除浮動事多多。1、在浮動元素後面加一個空的div，並為它清除浮動

<div>   <div>浮動</div>   <div></div>   <div>不想被浮動影響</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;}
現在雖然加了一個空的div，但是並沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。
OK，現在給.clear加上清除浮動：
刷新一下效果就出來了：
PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動的影響。
2、利用BFC特性清除浮動
html代碼：
<div>   <div>浮動</div>   <div>不想被浮動影響</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;}
效果是這樣的：
這裡父容器是沒有設置固定高度的，本來第一個子元素浮動之後，父元素的高度會塌陷到跟第二個子元素一樣高，但由於這裡分別給第二個子元素和父元素都設置了overflow:hidden ，所以它們都生成了一個新的BFC區域，根據上文提供的BFC布局規則可以得知：BFC區域不會與float box 重疊；計算BFC高度時浮動元素的高度也參與計算。所以就得到清除浮動的效果。說得比較繞，但其實清除浮動得根據自己開發中的實際情況合理使用。
3、使用：after偽元素，給浮動元素的父元素清除浮動
html代碼：
<div>   <div>浮動</div></div>
css代碼：
.wrap{  width:500px;  border:1px solid red;  margin:0 auto;}.float{  width:200px;  height:200px;  background:#ccc;  float:left;}
此時子元素浮動了，脫離了文檔流，所以父元素高度酒塌陷了：
可以看到父元素的邊框擠在一起了。
OK，現在給父元素添加一個clearfix類：
<div>   <div>浮動</div></div>
.clearfix{    *zoom:1;}.clearfix:after{    content:'clear';    display:block;    height:0;    clear:both;    overflow:hidden;    visibility:hidden;}
現在刷新後的效果就是：
這種方法和BFC清除浮動個人用的比較多，實際開發中，其實這兩種就夠用了。
好的，清除浮動我也就簡單地提到這裡！