Formatting Context：指页面中一个渲染区域，并且拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。
BFC(Block Formatting Context)：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与， 该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
满足下列CSS声明之一的元素便会生成BFC：
- 根元素或其它包含它的元素
- float的值不为none；
- overflow的值不为visible；
- position的值不为static；
- display的值为inline-block、table-cell、table-caption、 flex或inline-flex；
BFC的布局规则
1、内部的元素会在垂直方向一个接一个地排列，可以理解为是BFC中的一个常规流
2、元素垂直方向的距离由margin决定，即属于同一个BFC的两个相邻盒子的margin可能会发生重叠
3、每个元素的左外边距与包含块的左边界相接触(从左往右，否则相反)，即使存在浮动也是如此，这说明BFC中的子元素不会超出它的包含块
4、BFC的区域不会与float元素区域重叠
5、计算BFC的高度时，浮动子元素也参与计算
6、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然