浮动的元素虽然脱离了文档流,但是还是会在文档中占据相应的位置。所以,有的时候,就需要用到清除浮动。


假设现在有这样的情况:

1
2
3
4
5
<div class="container">
<div class="el-1"></div>
<div class="el-2"></div>
</div>
<div class="footer"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.container {
width: 800px;
padding: 20px;
border: 1px solid #aaaaaa;
}
.el-1,
.el-2 {
width: 300px;
height: 200px;
float: left;
}
.el-1 {
border: 2px solid red;
}
.el-2 {
border: 2px solid yellow;
}
.footer {
width: 500px;
height: 50px;
background-color: orange;
}

.el-1.el-2都设置了float: left,所以,.container的高度不能撑开,底下的.footer部分也没有按照理想的情况到页面底部。所以,这时候就要用到清除浮动。

1、添加空元素设置clear:both清除浮动

这是最古老的一种方法。在.el-2后面,加上一个空元素,然后添加.clear类。

1
2
3
4
5
6
7
<div class="container">
<div class="el-1"></div>
<div class="el-2"></div>
<!-- 添加空元素 -->
<div class="clear"></div>
</div>
<div class="footer"></div>
1
2
3
4
/* 设置clear类的样式 */
.clear {
clear: both;
}

设置了clear属性的元素,如果这个元素是在设置了float元素的后面,那么,在页面里,这个元素将会被移到浮动元素的下面。

如果需要对.footer清除浮动,那么,只需要在.footer上添加.clear类就可以了。

这种方法的缺点就是需要给页面添加空元素,对于语义化来说,就显得不那么友好了。


注意,以下的清除浮动的方法,针对的情况是对浮动元素的父级元素进行清除浮动,从而避免父级容器高度不能自适应的问题。

2、使用overflow: hidden || auto清除浮动

.container设置overflow属性可以达到清除浮动的效果。

1
2
3
4
5
6
.container {
width: 800px;
padding: 20px;
border: 1px solid #aaaaaa;
overflow: hidden; /* 或者设置为auto */
}

使用这种方法来清除浮动就不用添加空元素。

原理:设置了overflow不为visible的元素,会生成一个BFC(块级格式化上下文)。根据BFC的特性,BFC在计算高度的时候,浮动元素也会参与高度的计算。


3、使用.clearfix类清除浮动

添加.clearfix

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 只设置 after 也是可以的,为了保证绝对不出错,最好两者都设置 */
.clearfix:before,
.clearfix:after {
content: "";
display: table; /* 也可以设置为 block */
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1; /* ie 6/7 */
}

如果不想兼容IE8及以下的浏览器,可以这样写

1
2
3
4
5
.clearfix:after {
content: "";
display: table;
clear: both;
}

然后,为.container添加这个类。

这是一种比较推荐的做法。


4、使用min-height: contain-floats清除浮动

使用这种方法清除浮动,只需要给父级元素添加一行代码就可以了:

1
2
3
.container {
min-height: contain-floats;
}

这种方法的使用范围也许不是很广泛,浏览器的兼容性可能并不好。