清除浮动
howcode 2022-12-30 0 CSS
以下的代码回导致父元素高度塌陷
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.father{
width: 100%;
border: 1px solid #ff9900;
}
.child{
width: 100px;
height: 100px;
background: pink;
float: left;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1.额外标签法
<div class="father">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="clear"></div>
</div>
.clear{
clear: both;
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2.父元素添加overflow:hidden
.father{
width: 100%;
border: 1px solid #ff9900;
overflow:hidden;
}
1
2
3
4
5
2
3
4
5
3.伪元素法
<div class="father clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.clearfix:after{
content: "";
display:block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix{
*zoom:1; //兼容IE6、7
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
4.双伪元素法
<div class="father clearfix">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
.clearfix:before,.clearfix:after{
content: "";
display:table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom:1;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
评论
- 表情
——暂无评论——