在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
创建BFC
-
float的值不是none
-
position 的值不是static或者relative
-
display的值是inline-block,table-cell,flex,table-caption或者inline-flex
-
overflow的值不是visible
BFC的特性
-
内部的BOX会在垂直方向上一个接一个的放置
-
于同一个BFC的俩个相邻的BOX的margin会发生重叠，与方向无关。
-
每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
-
BFC的区域不会与float的元素区域重叠
-
计算BFC的高度时，浮动子元素也参与计算
-
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然
BFC在布局中的应用
要阻止margin重叠，只要将俩个元素别放在一个BFC中即可
使得父元素包含子元素，常见的方式是为父元素设置overflow：hidden或者浮动父元素。根本原因在于创建BFC的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题
与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖。利用该特性可以作为多栏布局的一种实现方式. 特点在于左右俩栏的宽度固定，中间栏可以根据浏览器宽度自适应