元素设置为float:left或者float:right之后，会脱离文档流，简单来讲，就是该元素的位置不属于该元素了。所以会造成浮动元素之后的元素替代占有该元素的位置。同样，也会造成父级元素高度不能自适应为子元素的高度。所以通常来讲，清除浮动的方式有以下几种，
1、设置父级元素overflow:hidden 触发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>
结果如下：
Paste_Image.png
很明显：父级元素未显示为蓝色，因为没有设置高度，也没有自适应为内容的高度，子元素1和子元素2浮动造成了自身脱离了文档流，其他元素受到影响，占据了浮动元素的位置。
overflow:hidden方式触发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 触发了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;
}
.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下触发hasLayout布局，清除浮动造成的影响。同样，由于清除垂直外边距合并也有用空元素的方式，让空元素代替和上面的元素发生合并，由于空元素margin-top为0，所以清除了合并的影响，也同样如此，利用伪类:before也可以在元素内部第一个位置生成空元素，清除掉collapse造成的影响。
转载于知乎，借鉴于知乎
网友评论