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 区域之中)
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖