css BFC(块级格式化上下文)

BFC的概念：块级格式化上下文

BFC的原理：

1. 垂直方向的外边距会发生重叠；
2. BFC的区域不会与浮动元素的区域重叠（常用来清除浮动）；
3. BFC在页面上是一个独立的容器，外面的元素不会影响里面的元素，里面的元素也不会影响外面的元素；
4. 计算BFC高度时，浮动元素也会参与计算

如何创建BFC：

• float值不为none；
• position的值不为static和relative；
• display的值为inline-block、table、table-cell、table-caption等table属性；
• overflow的值为auto、hidden。

BFC的使用场景：

• 解决元素垂直方向上外边距重叠的问题（给元素的父级创建BFC，解决本元素的外边距重叠问题）;
• 两列或三列使用浮动实现自适应布局，自适应部分高度超过左右两侧高度后，自适应部分与左右部分重叠（依照上面BFC原理的第2条，创建BFC）；
• 清除浮动