CSS如何清除浮動(dòng)？本篇文章給大家介紹一下使用CSS清除浮動(dòng)的3種方法。
有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)大家有所幫助。
首先這里就不講為什么我們要清楚浮動(dòng)，反正不清除浮動(dòng)事多多。
下面我就講三種常用清除浮動(dòng)的方法，夠用了。
1、在浮動(dòng)元素后面加一個(gè)空的div，并為它清除浮動(dòng)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)在雖然加了一個(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代碼：
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)之后，父元素的高度會(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)的效果。
說得比較繞，但其實(shí)清除浮動(dòng)得根據(jù)自己開發(fā)中的實(shí)際情況合理使用。
3、使用：
after偽元素，給浮動(dòng)元素的父元素清除浮動(dòng)html代碼：
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類：
.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)我也就簡單地提到這里！如果有什么錯(cuò)誤的話，歡迎留言指正。
相關(guān)教程推薦：
CSS視頻教程 、CSS3視頻教程以上就是CSS如何清除浮動(dòng)？3種方法介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標(biāo)簽：
CSS 清除浮動(dòng)本文轉(zhuǎn)載于：
博客園，如有侵犯，請(qǐng)聯(lián)系[email protected]刪除
上一篇：
css如何實(shí)現(xiàn)按鈕居中顯示
下一篇：
如何利用css實(shí)現(xiàn)圓環(huán)效果相關(guān)文章相關(guān)視頻前端常見css的面試題目2020年CSS面試題匯總（最新）談?wù)凜SS實(shí)現(xiàn)水平垂直居中布局的方法在html元素中設(shè)置css樣式的方式是什么CSS如何清除浮動(dòng)？3種方法介紹使用CSS3邊框?qū)傩允褂肅SS3文本屬性使用CSS3過渡屬性使用CSS3動(dòng)畫屬性使用CSS3多列布局屬性 [做網(wǎng)站css教程]