BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
触发
只要元素满足下面任一条件即可触发 BFC ：
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
布局特性
具备 BFC 属性的元素，在页面布局上会有如下特性：
- 内部的块级 Box 会在垂直方向上挨个排列
- 属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
- 子元素的 margin 左边界，与父容器的 border 左边界是相接触的，即使设置了浮动依然如此
- 具备 BFC 的区域不会与浮动的 Box 发生重叠
- BFC 就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
- 计算 BFC 的高度时，浮动元素也参与计算
应用
利用上述的这些 BFC 特性，我们可以总结出 BFC 具备如下的运用场景：
两栏或三栏自适应布局
以两栏为例，如果不给 main 容器添加 overflow: hidden 属性，main 容器会延展到浮动区域，使其成为 BFC 后，便可使其实现宽度自适应。
<div>
<div class="float"></div>
<div class="main"></div>
</div>
<style>
.float{
width: 200px;
height: 500px;
background: skyblue;
float: left;
}
.main{
background: pink;
height: 600px;
overflow: hidden; /* 使其成为 BFC */
}
</style>
这个方法也可运用于解决一个元素被浮动元素覆盖的问题，请戳-完整代码-在线预览
解决父容器高度塌陷
我们知道浮动元素会脱离文档流，当父容器的所有子元素都设置浮动后，会导致父容器出现高度“塌陷”的问题，如果让父容器设置为 BFC ，那么它就会包裹浮动元素，从而解决高度“塌陷”：
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
</div>
<style>
.wrap{
border: 1px solid red;
overflow: hidden; /* 使其成为 BFC */
}
.box{
width: 50px;
height: 50px;
background: skyblue;
float: left;
}
</style>
解决垂直方向 margin 重叠
从上述 BFC 的特性我们知道子元素垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻子元素的 margin 会发生重叠，解决办法就是使这两个相邻的子元素分别属于不同的 BFC：
<div class="wrap">
<div class="box">1</div>
<div class="inner">
<div class="box">2</div>
</div>
</div>
<style>
.box {
width: 50px;
height:50px;
background: skyblue;
margin: 50px;
}
.inner{
overflow: hidden;
}
</style>
这里我们给其中一个 Box 外面包一个 div（即 inner 容器），然后通过触发外面这个 div 的 BFC ，就可以阻止这两个 Box 的 margin 重叠。
