关于BFC

名为 “块级格式化上下文”。
本质就是一个封闭的盒子,是一个完全独立的空间（布局环境），让空间里的子元素不会影响到外面的布局。
特性：
1）内部元素在垂直方向上一个接一个放置
2）垂直方向上的外间距由margin值决定，属于同一个BFC区域的相邻的元素margin值会重叠
3）每个元素的左外间距与包含块的左边界相接触，浮动元素也是如此
4）BFC区域不会与浮动元素区域重叠
5）计算BFC高度时，浮动元素也会参与计算
6）BFC是页面上一个独立的渲染区域，容器中子元素不会影响到外面的元素，反之亦然
触发BFC使用的CSS属性
overflow: hidden|auto
float: left|right
display: inline-block|table-cell|flex
position: absolute|fixed
解决的问题
· 使用Float脱离文档流，高度塌陷(没撑开)：可以给父元素加一行例如display: inline-block或其他都可以，触发BFC。
· Margin边距重叠(为两个盒子的margin外边距设置的是10px，结果显示两个盒子之间只有10px的距离)：使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响，比如给其中一个盒子外面套一个

标签），或者简单粗暴方法一个设置margin，一个设置padding。
· 两栏布局(第二个元素可能会被第一个元素设置的float脱离文档流而被覆盖)：设置第二个元素的css属性从而触发BFC。