元素設置為float:left或者float:right之后昨登，會脫離文檔流播演，簡單來講冀瓦，就是該元素的位置不屬于該元素了。所以會造成浮動元素之后的元素替代占有該元素的位置写烤。同樣翼闽，也會造成父級元素高度不能自適應為子元素的高度。所以通常來講顶霞，清除浮動的方式有以下幾種肄程，
1锣吼、設置父級元素overflow:hidden 觸發(fā)BFC使父級元素自適應為子元素的高度。
2蓝厌、在浮動元素之后增加一個沒有實際作用的元素代替實際的元素替代浮動元素之后的元素受到浮動的影響玄叠，簡單來講，就是李代桃僵拓提，借尸還魂读恃。
3、clearfix方式
第三種實際是第二種的升級版代态，代碼說明：
*** 未清除浮動： ***
<!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"> 子級元素1 </div>
<div class="children red fl">子級元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
結(jié)果如下：
Paste_Image.png
很明顯：父級元素未顯示為藍色寺惫，因為沒有設置高度，也沒有自適應為內(nèi)容的高度蹦疑，子元素1和子元素2浮動造成了自身脫離了文檔流西雀，其他元素受到影響，占據(jù)了浮動元素的位置歉摧。
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"> 子級元素1 </div>
<div class="children red fl">子級元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
Paste_Image.png
設置父元素overflow:hidden 觸發(fā)了BFC艇肴，父級高度自適應為內(nèi)容高度，其他元素沒有受到浮動的影響叁温。
增加空元素清除浮動方式
<!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"> 子級元素1 </div>
<div class="children red fl">子級元素2</div>
<div class="clear"></div>
</div>
<div class="others">其他元素</div>
</body>
</html>
相比最初的代碼再悼，新增了一個空元素<div class="clear"></div>給.clear設置了clear:both，代替其他元素受到浮動的影響膝但，也就是李代桃僵冲九。
效果如下：
Paste_Image.png
:after 方式為空元素的升級版
<!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"> 子級元素1 </div>
<div class="children red fl">子級元素2</div>
</div>
<div class="others">其他元素</div>
</body>
</html>
效果如下：
Paste_Image.png
和第二種方式一樣，也是利用空元素替代接受浮動的影響跟束，只不過是利用偽類:after 生成空元素莺奸，
clearfix:after生成了一個‘ ’空元素，該元素寬高均為0泳炉，等同于第二種方式中的"<div class="clear"></div>"憾筏，生成的元素在子級元素2之后嚎杨。然后該元素同樣有屬性clear:both花鹅，同樣的原理，清除了浮動的影響枫浙。*zoom: 1;是在IE6 7下觸發(fā)hasLayout布局刨肃，清除浮動造成的影響。同樣箩帚，由于清除垂直外邊距合并也有用空元素的方式真友，讓空元素代替和上面的元素發(fā)生合并，由于空元素margin-top為0紧帕，所以清除了合并的影響盔然，也同樣如此桅打，利用偽類:before也可以在元素內(nèi)部第一個位置生成空元素，清除掉collapse造成的影響愈案。
轉(zhuǎn)載于知乎挺尾，借鑒于知乎
