说明
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
形成BFC的条件
- 浮动元素，float 除 none 以外的值；
- 定位元素，position（absolute，fixed）；
- display 为以下其中之一的值 inline-block，table-cell，table-caption；
- overflow 除了 visible 以外的值（hidden，auto，scroll）；
- body 根元素；
BFC的特性
- 内部的Box会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由margin决定
- bfc的区域不会与float的元素区域重叠。
- 计算bfc的高度时，浮动元素也参与计算
- bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
主要用途
清除元素内部浮动
把父元素设置为bfc就可以清除子元素的浮动，最常见的就是给父元素添加overflow：hidden属性。
例子：
解决外边距合并问题
两个盒子在一起时，当有相邻的外边距时，会取外边距较大的那一个，也就是外边距会合并，但这种情况只发生在同属一个bfc的两个盒子中间，换言之，要想解决外边距合并问题，只要把两个盒子放在不同的bfc中即可。
例子：
盒子固定宽度问题
当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。
例子：