对 BFC 规范(块级格式化上下文:block formatting context) 的理解 ?
BFC 规定了内部的 Block Box 如何布局。
定位方案:
- 内部的 Box 会在垂直方向上一个接一个放置。
- Box 垂直方向的距离由 margin 决定,属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠。
- 每个元素的 margin box 的左边,与包含块 border box 的左边相接触。
- BFC 的区域不会与 float box 重叠。
- BFC 是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
计算 BFC 的高度时,浮动元素也会参与计算。
满足下列条件之一就可触发 BFC:
- 1、根元素,即 html
- 2、float 的值不为 none(默认)
- 3、overflow 的值不为 visible(默认)
- 4、display 的值为 inline-block、table-cell、table-caption
- 5、position 的值为 absolute 或 fixed