CSS清除浮动的方法

将元素的 css 属性 float 的值设置为 left 或 right，把浮动方式改为左浮动或右浮动，使其脱离标准文档流，也会导致父元素高度塌陷，这时就需要清除浮动。

<div class="box">
    <div class="a"></div>
    <div class="b"></div>
</div>

.box {
    background-color: #000;
}
.box .a {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #f00;
}
.box .b {
    float: right;
    width: 100px;
    height: 100px;
    background-color: #0f0;
}

可以通过以下几个方法清除浮动：

1.将父元素 overflow 属性设置为 auto 或 hidden；

.box {
    overflow: hidden;
}

2.添加额外子元素，并设置 clear 属性值为 both；

<div class="box">
    <div class="a"></div>
    <div class="b"></div>
    <div class="clear"></div>
</div>

.clear {
    clear: both;
}

3.给父元素添加::after伪元素，并设置 content、display、clear 属性；

.box::after {
    content: "";
    display: block;
    clear: both;
}

可以新增一个专门清除浮动的类，在需要清除浮动的元素上添加 class 即可：

.clearfix {
    content: "";
    display: block;
    clear: both;
}

<div class="box clearfix">
    <div class="a"></div>
    <div class="b"></div>
</div>