原理解释——block formatting context
下列情况将创建一个块格式化上下文：
- float的值不为none
- position的值为absolute或fixed
- overflow的值不为visible（默认就是visible，所以要改变必须显式设置）
- display的值为table-cell, table-caption, flex, inline-flex, inline-block,中的任何一个
- 根元素（其中除了inline-flex和inline-block的前后不会强制进行换行以外，其他都会三者都会使元素强制前后换行。）
BFC应用要点：
- BFC不会和浮动元素重叠。
- 例：普通浮动
普通float.png
- 例：将右边变成BFC（添加overflow:hidden）
左边浮动，右边BFC.png
- 解析：右边设置了BFC后，由于（1）BFC不能与浮动元素重叠，所以这里BFC自动避让开，就像两者接壤处有一条边界，BFC永远不会超过。并且如果想在BFC上设置margin-left使两者有间隔，这个将遏制必须大于图片的宽度，因为（2）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC会计算内部浮动元素的高度
- 当父元素不是BFC，且未设置高度，而内部又有浮动元素时：
无BFC的浮动.png
- 如果把父元素改成BFC，它就会识别到内部浮动元素的高度，从而将自己的高度撑开，避免高度塌陷
有BFC的浮动.png
利用上面的父容器会计算内部浮动元素高度的特性，可以使父元素形成闭合浮动，从而让浮动不影响其他元素，达到清楚浮动的目的。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
BFC可以解决上下margin重叠的问题：
- BFC内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠，但只要两个中有一个不属于父BFC，或两者都创建了新的BFC，那么margin就不会发生重叠
