BFC简单理解

以前有提到过overfllow : hidden/auto可以清除浮动，这里生效的特性就是BFC，Block Formatting Contexts块级格式化上下文。

BFC简述

1. 功能
BFC特性可以让元素拥有一定的隔离性、独立性，使该元素不会影响到兄弟元素的布局。比如避免浮动元素父元素高度塌陷；比如避免相连的 div 在垂直上的外边距会发生叠加等。

2. 触发BFC特性

• 浮动，float 除 none 以外的值
• position（absolute，fixed）
• display 为以下其中之一的值 inline-blocks，table-cells，table-captions
• overflow 除了 visible 以外的值（hidden，auto，scroll）

3. BFC特性的功能

• 防止外边距折叠（外边距折叠的规则：仅当两个块级元素相邻并且在同一个块级格式化上下文时，它们垂直方向上的外边距才会折叠）。demo
• BFC 包含浮动的元素时，不会有高度塌陷的问题（清除浮动带来的影响，具体可以看文首提到的blog）。demo
• BFC清浮动防兄弟浮动元素遮挡。demo