先说说FC，全称是Fomatting Context,即格式化上下文，它是CSS2.1规范中的一个概念。
它是页面中的一个渲染区域，决定了子元素怎么定位，以及和其他的元素之间的关系及相互作用。
BFC和IFC都是常见的FC,而我们今天重点说下BFC。
BFC,全称是Block Formatting Context,即块级格式化上下文。
特点如下：
- 网页中的一个独立的渲染区域；
- 该区域中只有块级元素,也就是display的值是block,table,list-item;
- 规定了内部的元素应该如何布局；
- 该区域内部布局与外部毫不相干；
- 外部元素不会影响bfc渲染区域内的元素。
布局规则如下：
- 两个相邻元素垂直方向的margin会发生重叠/合并，水平方向不会；
- 计算渲染区域的高度时，内部浮动元素高度，必须计算在内。
如何形成BFC:
- float的值不是none;
- position的值不是static或者relative；
- display的值是inline-block,table-cell,flex,table-caption或inline-flex；
- overflow的值不是visible.
然后我们看下BFC的应用：
- 解决父元素高度塌陷，先说说高度塌陷，父元素的高度是由内部未浮动的子元素的高度撑起的，若内部子元素浮动起来，就会脱离文档流，不再占用普通文档流的位置，父元素的高度就会失去支撑，也就是高度塌陷，那BFC是如何解决这个问题呢，看以下方案：
父元素 {overflow:hidden} 或者 父元素{display:table} 或者 父元素{float:left}
这三种设置都可以解决该问题，当然也会随之出现一些其他的问题，并不是最优的解决方法，当然我们现在说的是BFC，它的原理就是使整个父元素包裹的区域形成了BFC区域，根据BFC的布局规则，浮动元素的高度必须计算在内，因此高度撑起。
- 经典左右俩栏布局
#left{ background-color: red; float: left; width: 20px; height: 100%; } #right{ background-color: yellow; overflow: hidden; }
原理是，右边的元素设置overflow:hidden后形成BFC,左边的float元素不能进入右边的范围。
