BFC块级格式化上下文

1、BFC定义

块级格式化上下文，是一个独立的渲染区域，只有块盒子参与，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

2、创建BFC

如何创建BFC：

• 根元素
• position: absolute/fixed
• display为 inline-block / table（块级元素是参与BFC，不是创建BFC）
• float 元素，除了none以外的值；
• ovevflow除了visible以外的值；

3、BFC的特点：

• 在一个BFC内部，盒子会在垂直方向上一个接一个排列；
• 在一个BFC内部，相邻 Box 的 margin -top和margin-bottom会发生重叠；
• BFC 中子元素的 margin box 的左边， 与包含块 (BFC) border box的左边相接触 (子元素 absolute 除外)
• BFC 的区域不会与 float 的元素区域重叠
• 计算 BFC 的高度时，浮动子元素也参与计算
• 文字层不会被浮动层覆盖，环绕于周围

4、BFC的应用：

• 阻止margin重叠
• 可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
• 自适应两栏布局
• 可以阻止元素被浮动元素覆盖