今天翻看博客时,偶然看到一个面试题,在解答过程中说到了"BFC",遂百度之.发现自己真是孤陋寡闻了.

1.Block Formatting Context 是什么?

BFC=Block Formatting Context(块格式化上下文),它是CSS中一个重要的概念,理解了它,我们也就能好的理解一些布局.下面是来自Mozilla Developer Center的定义.

A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.

2.触发条件

  • root元素
  • float(none以外的值)
  • position(absolute或fixed)
  • display等于inline-block
  • display等于table-cell
  • display等于table-caption
  • overflow(除了visible以外的值)
  • flex boxes(display等于flex或inline-box)

3.Block Formatting Context的作用

  1. Block Formatting Context会阻止边距折叠
  2. Block Formatting Context可以包含内部元素的浮动
  3. Block Formatting Context可以阻止元素覆盖浮动盒模型

4.更多资料

以上是一些基础概念,更详细的介绍可以在下面的链接中查看