元素設(shè)置為float:left或者float:right之后，會(huì)脫離文檔流，簡(jiǎn)單來講，就是該元素的位置不屬于該元素了。所以會(huì)造成浮動(dòng)元素之后的元素替代占有該元素的位置。同樣，也會(huì)造成父級(jí)元素高度不能自適應(yīng)為子元素的高度。所以通常來講，清除浮動(dòng)的方式有以下幾種，
1、設(shè)置父級(jí)元素overflow:hidden 觸發(fā)BFC使父級(jí)元素自適應(yīng)為子元素的高度。
2、在浮動(dòng)元素之后增加一個(gè)沒有實(shí)際作用的元素代替實(shí)際的元素替代浮動(dòng)元素之后的元素受到浮動(dòng)的影響，簡(jiǎn)單來講，就是李代桃僵，借尸還魂。
3、clearfix方式
第三種實(shí)際是第二種的升級(jí)版，代碼說明：
*** 未清除浮動(dòng)： ***
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear float</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.fl{
float: left;
}
.parent{
width: 300px;
background-color:#00f;
}
.children{
width:100px;
height:100px;
}
.green{
background-color:#0f0;
}
.red{
background-color:#f00;
}
.others{
width:240px;
height:40px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="children green fl"> 子級(jí)元素1 </div>
<div class="children red fl">子級(jí)元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
結(jié)果如下：
很明顯：父級(jí)元素未顯示為藍(lán)色，因?yàn)闆]有設(shè)置高度，也沒有自適應(yīng)為內(nèi)容的高度，子元素1和子元素2浮動(dòng)造成了自身脫離了文檔流，其他元素受到影響，占據(jù)了浮動(dòng)元素的位置。
overflow:hidden方式觸發(fā)BFC
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear float</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.fl{
float: left;
}
.parent{
width: 300px;
background-color:#00f;
overflow:hidden;
}
.children{
width:100px;
height:100px;
}
.green{
background-color:#0f0;
}
.red{
background-color:#f00;
}
.others{
width:240px;
height:40px;
background-color:#ccc;
}
</style>
</head>
<body>
<div class="parent">
<div class="children green fl"> 子級(jí)元素1 </div>
<div class="children red fl">子級(jí)元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
設(shè)置父元素overflow:hidden 觸發(fā)了BFC，父級(jí)高度自適應(yīng)為內(nèi)容高度，其他元素沒有受到浮動(dòng)的影響。
增加空元素清除浮動(dòng)方式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear float</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.fl{
float: left;
}
.parent{
width: 300px;
background-color:#00f;
}
.children{
width:100px;
height:100px;
}
.green{
background-color:#0f0;
}
.red{
background-color:#f00;
}
.others{
width:240px;
height:40px;
background-color:#ccc;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="parent">
<div class="children green fl"> 子級(jí)元素1 </div>
<div class="children red fl">子級(jí)元素2</div>
<div class="clear"></div>
</div>
<div class="others">其他元素</div>
</body>
</html>
相比最初的代碼，新增了一個(gè)空元素<div class="clear"></div>給.clear設(shè)置了clear:both，代替其他元素受到浮動(dòng)的影響，也就是李代桃僵。
效果如下：
:after 方式為空元素的升級(jí)版
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>clear float</title>
<style>
*{
margin: 0;
padding: 0;
list-style-type: none;
}
.fl{
float: left;
}
.parent{
width: 300px;
background-color:#00f;
}
.children{
width:100px;
height:100px;
}
.green{
background-color:#0f0;
}
.red{
background-color:#f00;
}
.others{
width:240px;
height:40px;
background-color:#ccc;
}
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="parent clearfix">
<div class="children green fl"> 子級(jí)元素1 </div>
<div class="children red fl">子級(jí)元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
效果如下：
和第二種方式一樣，也是利用空元素替代接受浮動(dòng)的影響，只不過是利用偽類:after 生成空元素，
clearfix:after生成了一個(gè)‘ ’空元素，該元素寬高均為0，等同于第二種方式中的"<div class="clear"></div>"，生成的元素在子級(jí)元素2之后。然后該元素同樣有屬性clear:both，同樣的原理，清除了浮動(dòng)的影響。*zoom: 1;是在IE6 7下觸發(fā)hasLayout布局，清除浮動(dòng)造成的影響。同樣，由于清除垂直外邊距合并也有用空元素的方式，讓空元素代替和上面的元素發(fā)生合并，由于空元素margin-top為0，所以清除了合并的影響，也同樣如此，利用偽類:before也可以在元素內(nèi)部第一個(gè)位置生成空元素，清除掉collapse造成的影響。
轉(zhuǎn)載于知乎，借鑒于知乎
