BFC的理解及应用
什么是BFC
BFC 是 （ Block Fromatting Context ） 的简写，翻译过来是 块级格式化上下文 ，拥有 BFC 属性的盒子，将成为一个独立的区域，用它独有的渲染方式，对其内部的元素进行渲染，但是不管它的内部发生什么样的变化，都不会对其外部造成任何影响。
BFC的特点
BFC和标准流的渲染方式十分相似，却又不同。
1. 独立性
BFC是一个独立的渲染空间，其内的元素不会影响到外部。
margin-top ：
普通块级元素（其父元素不含 padding 和 border）
BFC元素
注： 如果普通元素其父元素 padding 或 border 不为零，也会隔开自身与父元素。
普通块级元素其父元素 border 不为 0
普通块级元素其父元素 padding 不为 0
2. 识别浮动元素（解决高度塌陷问题）
BFC元素可以识别其兄弟浮动元素，和其子浮动元素。
BFC元素识别其兄弟浮动元素
普通块级元素与浮动兄弟元素
BFC元素与浮动兄弟元素
BFC元素识别其子浮动元素
普通块级元素与浮动子元素
BFC元素与浮动子元素
创建BFC元素
- 浮动：float：left | right
- 绝对定位或固定定位：position： absolute | fixed
- overflow 属性值不为 visible ： overflow： hidden | scroll | auto | ……
- display属性值为：inline-block、table-cells、table-cells ……