CSS如何清除浮動？本篇文章給大家介紹一下使用CSS清除浮動的3種方法。
有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
首先這里就不講為什么我們要清楚浮動，反正不清除浮動事多多。
下面我就講三種常用清除浮動的方法，夠用了。
1、在浮動元素后面加一個空的div，并為它清除浮動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ā)中，其實這兩種就夠用了。
好的，清除浮動我也就簡單地提到這里！如果有什么錯誤的話，歡迎留言指正。
相關教程推薦：
CSS視頻教程 、CSS3視頻教程以上就是CSS如何清除浮動？3種方法介紹的詳細內(nèi)容，更多請關注php中文網(wǎng)其它相關文章！
微信
分享相關標簽：
CSS 清除浮動本文轉載于：
博客園，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
css如何實現(xiàn)按鈕居中顯示
下一篇：
如何利用css實現(xiàn)圓環(huán)效果相關文章相關視頻前端常見css的面試題目2020年CSS面試題匯總（最新）談談CSS實現(xiàn)水平垂直居中布局的方法在html元素中設置css樣式的方式是什么CSS如何清除浮動？3種方法介紹使用CSS3邊框屬性使用CSS3文本屬性使用CSS3過渡屬性使用CSS3動畫屬性使用CSS3多列布局屬性 [做網(wǎng)站css教程]