参考链接

前端精选文摘：BFC 神奇背后的原理

清除浮动的四种方式及其原理理解

「百毒不侵(七)」面试官最喜欢问的6种清除浮动和 BFC

MDN: content

（原例代码见末尾）

CSS清除浮动、解决边框塌陷

clearfix: 父级元素增加 ::after 伪元素使用 clear

• clear 会清除 相同块级格式上下文 (BFC) 中的前置浮动

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

content 不能为 none 或 normal ，否则不会产生伪元素。

display 需要为 block，因为 clear 清除的是相同块级格式上下文 (BFC) 中的前置浮动，BFC 针对的是块级元素。

将父级盒子变成 BFC 盒子

• 计算 BFC 的高度时，浮动元素也参与计算

.box {
    position: absolute | fixed;
    /*overflow: hidden | auto | scroll;*/
    /*float: left | right;*/
}

原例

HTML

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

CSS

.box {
    border: 1px solid black;
    padding: 5px;
    width: 400px;
}
.left {
    width: 100px;
    height: 100px;
    background-color: red;
    float: left;
}
.right {
    width: 100px;
    height: 100px;
    background-color: red;
    float: right;
}