什么是BFC，BFC特性，BFC怎么产生？

什么是BFC?

BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境.
MDN：

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC怎么产生?

一个块格式化上下文由以下之一创建：
1.根元素或其它包含它的元素
2.浮动元素 (元素的 float 不是 none)
3.绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4.内联块 (元素具有 display: inline-block)
5.表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6.表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7.具有overflow 且值不是 visible 的块元素，
8.display: flow-root
9.column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

BFC特性

在一个BFC中，垂直方向上，盒子是从包含块顶部开始一个挨着一个布局的，两个相邻的盒子的垂直距离是由margin属性决定的，在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。
在一个BFC中，水平方向上，每个盒子的左边缘都会接触包含块的左边缘（从右向左的格式则相反）。除非出现浮动元素和其他元素相互作用的情况（当有浮动元素时，行盒可能因浮动元素而收缩，如果有盒子形成了新的BFC，那这个盒子也可能因浮动元素而变窄）。
这样我们终于知道为什么《精通CSS》里提到外边距塌陷时，为什么设置这么多的条件了：

处于文档流中的块级元素
垂直外边距直接相遇
其中第一个条件就是为了防止形成BFC，我们要注意的是BFC内部的子元素之间可以形成外边距塌陷，但BFC元素和其他块级元素是不能形成外边距塌陷的。

(可以参考https://segmentfault.com/q/1010000008875016)

BFC盒子的3个用途

1、清除浮动，比如设置了overflow:hidden;、position:absolute;、float:left;的元素，【其内部】的浮动会被清除（注意清除浮动说的都是float产生的浮动，position:absolute|fixed那不叫浮动）

2、修复margin折叠

3、两栏布局自适应(仅overflow+float有效)