CSS | 清除浮动浮点的 5 种方法

一、基本样式

一个父元素中有两个子元素，其中两个子元素分别左右浮动。

HTML代码：

<div class="father">
    <div class="son left"></div>
    <div class="son right"></div>
</div>

CSS代码：

.father {
    width: 400px;
    border: 1px solid red;
}
.son {
    width: 100px;
    height: 100px;
    background-color: aqua;
}
.left {
    float: left;
}
.right {
    float: right;
}

效果图：

可以看到，父元素的高度原先由子元素撑起，因为子元素浮动，导致父元素高度坍塌。

二、清除浮动的5种方法

1、给父元素设置height

直接给父元素的height属性设一个固定值：

.father {
    height: 100px;
}

---

2、clear: both

向父元素中最后一个子元素后添加一个div：

<div class="father">
    <div class="son left"></div>
    <div class="son right"></div>
    <div class="clear"></div>
</div>

.clear {
    clear: both;
}

---

3、给父元素设置float

直接让父元素也浮动起来，打不过就加入：

.father {
    float: left;
}

---

4、给父元素设置overflow

overflow属性为元素对溢出内容的处理方式，可以将其值设置为hidden或者auto来包含子元素：

.father {
    overflow: hidden;
    /* 或者 */
    /* overflow: auto; */
}

---

5、给父元素设置after伪元素

可以添加一个不占用空间的after伪元素，将其clear属性设置为both：

.father::after {
    content: '';
    display: block;
    clear: both;
}

---

三、总结

• 添加子元素设置clear和添加after伪元素设置clear都差不多，但是代码量偏多；
• 给父元素设置height会导致父元素高度固定，如果要求父元素高度随子元素高度变化而变化那这个方法就不太合适；
• 给父元素设置float可能会破坏原先的布局；
• 给父元素设置overflow建议使用。