对 BFC 规范(块级格式化上下文:block formatting context) 的理解 ?

2022-03-12T17:30:57

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
当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »