BFC的概念

Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

那么 BFC 是什么呢？

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定的规则进行物品摆放，并且不会影响其他环境中的物品。
如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。
如果浮动元素会创建BFC，则浮动元素内部的子元素都受到该浮动元素的影响，所以浮动元素之间是互不影响的。

BFC的特性

BFC是一个独立的容器，容器内子元素不会影响容器外的元素，反之亦是如此。
盒子从顶端开始垂直的一个一个的排列，盒子之间垂直的间距是由margin决定的。
在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生重叠。
BFC区域不会和float box发生重叠。
BFC能够识别并包含浮动元素，当计算其区域的高度时，浮动元素也可以参与计算了。
计算BFC的高度时，浮动元素也参与计算。

触发BFC

只要元素满足以下任意一种条件就可以触发BFC特性：

body根元素
浮动元素：float除none以外的值
绝对定位元素：position（absolute、fixed）
display为inline-block、table-cells、flex、inline-flex、table-caption
overflow除了visible以外的值（hidden、auto、scroll）

BFC的应用

防止margin重叠（塌陷）
相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的垂直边距相遇时，它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者。
外边距折叠的条件是 margin 必须相邻!

<style type="text/css">
    .box{
        color: brown;
        background: rgb(226, 159, 108);
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        margin: 100px;
    }
</style>

<body>
    <div class="box">上面</div>
    <div class="box">下面</div>
</body>

image.png

两个box之间的距离为100px，发生了margin重叠（塌陷），解决这个问题，只需要把其中一个box变为BFC元素即可

<style type="text/css">
    .box {
        color: brown;
        background: rgb(226, 159, 108);
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        margin: 100px;
    }
</style>

<body>
    <div class="box">上面</div>
    <div style="overflow: hidden;">
        <div class="box">下面</div>
    </div>
</body>

image.png

清除内部浮动

浮动元素会脱离文档流(绝对定位元素也会脱离文档流)，导致无法计算准确的高度，这种问题称为高度塌陷。
解决高度塌陷问题的前提是能够识别并包含浮动元素，也就是清除浮动。

<style type="text/css">
    .parent {
        width: 300px;
        border: 2px solid rgb(120, 201, 177);
    }
    .box {
        color: brown;
        background: rgb(226, 159, 108);
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
    }
</style>
<body>
    <div class="parent">
        <div class="box">上面</div>
        <div class="box">下面</div>
    </div>
</body>

image.png

如上左图所示，容器（parent）没有高度或者 height = auto ,并且其子元素（box）是浮动元素，所以该容器的高度是不会被撑开的，即高度塌陷。
解决方法：在容器（container）中创建 BFC。

<style type="text/css">
    .parent {
        width: 300px;
        border: 2px solid rgb(120, 201, 177);
        overflow: hidden;
    }
    .box {
        color: brown;
        background: rgb(226, 159, 108);
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        float: left;
    }
</style>

<body>
    <div class="parent">
        <div class="box">上面</div>
        <div class="box">下面</div>
    </div>
</body>

image.png

自适应多栏布局

<style type="text/css">
    body{
        width: 300px;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(47, 187, 145);
    }
    .main {
        height: 200px;
        background: rgb(171, 75, 156);
    }
</style>
<body>
    <div class="aside">aside</div>
    <div class="main">main</div>
</body>

image.png

这时候main元素有部分被浮动元素所覆盖，(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖，可以通过触发main生成BFC，以此适应两栏布局

<style type="text/css">
    body{
        width: 300px;
    }
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(47, 187, 145);
    }
    .main {
        height: 200px;
        overflow: hidden;
        background: rgb(171, 75, 156);
    }
</style>

<body>
    <div class="aside">aside</div>
    <div class="main">main</div>
</body>

image.png