清除浮动的方法
# 清除浮动的四种方法
# 清除浮动主要是为了解决，父元素因为子级元素浮动引起高度塌陷问题
正常情况下排列
# 当给子盒子加上float属性的时候，父盒子就会塌陷，形成一条线，这时就需要清除浮动
# 清除浮动最常用的4种方法
# 1.额外标签法（新增div,设置clear:both，不推荐使用）
优点：通俗易懂，方便
缺点：添加无意义标签，语义化差
<style>
.extra {
clear: both;
}
</style>
<div class="father">
<div class="son"></div>
<div class="extra"></div> //新增div
</div>
<div class="other"></div>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 2.父级添加overflow属性（不推荐使用）
优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素
<style>
.father {
border: 2px solid black;
overflow: hidden;
}
</style>
1
2
3
4
5
6
7
2
3
4
5
6
7
# 3.使用after伪元素清除浮动（推荐使用）
优点：符合闭合浮动思想，结构语义化正确
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
<style>
.clearfix:after {
/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
</style>
<div class="father clearfix">
<div class="son"></div>
</div>
<div class="other"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 4.使用before和after双伪元素清除浮动(推荐使用)
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
<style>
.clearfix:after,
.clearfix:before {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
</style>
<div class="father clearfix">
<div class="son"></div>
</div>
<div class="other"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
编辑 (opens new window)
上次更新: 2021/07/01, 20:33:02