BFC（块级格式化上下文）

首先回忆

块级元素：会新起一行：div

行内元素：不换行：span

块级元素（display为block元素）会生成block-level box(块级盒子)，按块级盒子布局方式渲染，并且这个盒子不受外部影响，也不影响外部布局

行内元素（display为inline或者inline-block元素）会生成inline-level box(行内盒子)，按行内盒子布局方式渲染

BFC规则：

1. BFC的区域不会与float box叠加。
2. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
3. 计算BFC的高度时，浮动元素也参与计算。

何时触发BFC：

1. float 除了none以外的值
2. overflow 除了visible 以外的值（hidden，auto，scroll ）
3. display (table-cell，table-caption，inline-block, flex, inline-flex)
4. position值为（absolute，fixed）
5. fieldset元素

当遇到问题是一般是用overflow:hidden;解决的：

1.比如解决margin重合：给不想重合的盒子加个父级并设置overflow:hidden;

2.比如解决div包裹两个float元素，使用overflow:hidden;将父级盒子计算高度撑起来

3.比如解决两列布局自适应问题