什么是BFC（Block formatting context）
BFC（Block formatting context），翻译过来为“块级格式化上下文”。
其实BFC就是一个独立的渲染区域，只有块级盒子参与，规定了内部的块级盒子如何布局，并且与这个区域外部没半毛钱关系。
哪些元素具有BFC条件
不是所有的元素都能产生BFC，W3C规定
display属性为block, list-item , table的元素，会产生BFC
什么样的情况可以产生BFC
要给元素添加下列属性就可以产生BFC：
float属性不为none。
position为absolute或fixed。
display为inline-block, table-cell , table-caption , flex , inline-flex。
overflow不为visible。
BFC元素具有的特性
BFC布局特性：
1，盒子从顶端开始垂直地一个接一个地排列。
2，盒子垂直方向的距离由margin决定。属于同一个BFC的相邻两个盒子的margin会发生重叠，会选择其最大的。
3，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）。
4，BFC区域不会与浮动的盒子产生交集，而是紧贴浮动边缘。
5，计算BFC高度时，自然也会检测浮动的盒子高度。
BFC的用途
1，清除浮动
只要把父元素设为BFC就可以清理子元素的浮动了，最常见的做法就是在父元素上设置overflow:hidden;样式。
2，解决外边距合并问题
只要加一个Div将其中一个盒子隔离为具有BFC特性就可以避免外边距合并问题
3，制作右侧自适应的盒子问题
BFC区域不会与浮动的盒子产生交集，而是紧贴浮动边缘