CSS清除浮動的幾種方法
來源 |?https://www.html.cn/web/css/19613.html
浮動 不想被浮動影響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)在雖然加了一個空的div，但是并沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。
OK，現(xiàn)在給.clear加上清除浮動：
.clear{clear:both;}
刷新一下效果就出來了：
PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動的影響。
2、利用BFC特性清除浮動
html代碼：
浮動 不想被浮動影響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區(qū)域，根據(jù)上文提供的BFC布局規(guī)則可以得知：BFC區(qū)域不會與float box 重疊；計算BFC高度時浮動元素的高度也參與計算。所以就得到清除浮動的效果。說得比較繞，但其實清除浮動得根據(jù)自己開發(fā)中的實際情況合理使用。
3、使用：after偽元素，給浮動元素的父元素清除浮動
html代碼：
浮動css代碼：
.wrap{width:500px;border:1px solid red;margin:0 auto;}.float{width:200px;height:200px;background:#ccc;float:left;}
此時子元素浮動了，脫離了文檔流，所以父元素高度酒塌陷了：
可以看到父元素的邊框擠在一起了。
OK，現(xiàn)在給父元素添加一個clearfix類：
浮動.clearfix{*zoom:1;}.clearfix:after{content:'clear';display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
現(xiàn)在刷新后的效果就是：
這種方法和BFC清除浮動個人用的比較多，實際開發(fā)中，其實這兩種就夠用了。
好的，清除浮動我也就簡單地提到這里！
評論
圖片
表情