CSS BFC是什么?

BFC

块格式化上下文(Block Formatting Context,BFC)

BFC是什么其实很难去讲清楚。就好像,你知道桌子是什么,但是你不好用语言形容,但是你看到了它,却可以认出来他是桌子一样。

那么我们只需要记住什么时候会 创建块格式化上下文

上面是MDN的说法,但是其实面试中不需要说这么多情况,毕竟这个也就是在面试中会使用到。
那么我们就记住一部分就好了。

  • 根元素()
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • overflow 计算值(Computed)不为 visible 的块元素
  • display 值为 flow-root 的元素 (兼容性不太好)
  • 弹性元素(display 为 flex 或 inline-flex 元素的直接子元素)
  • 网格元素(display 为 grid 或 inline-grid 元素的直接子元素)

块格式化上下文的可以清除浮动,可以将div中的浮动元素全部包裹起来。
我们平时会使用

.container::after{
  content:'';
  display:block;
  clear:both;
}

这种方式来清除浮动。那就是因为创造BFC来清除浮动会使用一些副作用的css

display:flow-root

这个属性的兼容性又不太好,所以BFC的讨论大多数都是存在于面试当中。

你可能感兴趣的