前面的元素设置了float: left，那么后面的元素会识别不到前面的元素从而被前面的元素遮挡
1
2
| <div class="box_1"></div>
<div class="box_2"></div>
|
1
2
3
4
5
6
7
8
9
10
11
12
| .box_1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box_2 {
width: 100px;
height: 100px;
background-color: yellow;
clear: both;
}
|
效果：.box_1和.box_2会各自独占一行。
如果一个元素设置了浮动，对于该元素清除浮动只需要对其父元素之后的元素清除浮动，然后父元素的高度就不会塌陷
这里使用伪元素来插入父元素之后的元素，并将其设置为clear: both
1
2
3
4
| <div class="parent">
<div class="son_1"></div>
<div class="son_2"></div>
</div>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| .son_1 {
width: 50%;
float: left;
}
.son_2 {
width: 50%;
float: right;
}
.parent::after {
content: '';
display: block;
clear: both;
}
|
编写.clearfix::after降低工作量
1
2
3
4
5
| .clearfix::after {
content: '';
display: block;
clear: both;
}
|
以后只需要在父元素class上加clearfix即可。
