BFC：块状格式化上下文

一、什么是BFC

BFC的全称是块状格式化上下文，MDN中对于对于BFC的定义如下：

一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

BFC是一个独立的布局环境，按照块级盒子进行布局，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

二、BFC的产生

一个块状格式化上下文可由以下方法创建：

• 根元素（html元素）或其它包含它的元素
• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
• 内联块 (元素具有 display: inline-block)
• 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
• 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
• 具有overflow 且值不是 visible 的块元素，
• display: flow-root
• column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。
• 弹性盒flex boxes（元素具有display: flex或inline-flex）

使用overflow或上述某些方法创建BFC时会有两个问题。首先，这些方法本身是有自身的设计目的，所以在使用它们创建BFC时可能会产生副作用，例如，使用overflow创建BFC后在某些情况下可能会看到出现一个滚动条或者元素内容被裁切。这是由于overflow属性的设计是用来让你告诉浏览器如何定义元素的溢出状态的。浏览器执行了它最基本的定义。
即使在没有任何不想要的副作用的情况下，使用 overflow 也可能会让其他开发人员感到困惑。为什么 overflow 设置为 auto 或 scroll?最初的开发者的意图是什么?他们想要这个组件上的滚动条吗?
因此最理想的做法是创建一个BFC的同时不会产生任何副作用，因此这就有了display: flow-root的诞生，但是目前各大主流浏览器对于display: flow-root属性的支持还是有限的，各大浏览器的支持情况如下图所示：

除此之外我们需要注意到一个块状格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

三、BFC的特性

你可以把BFC看成布局中的一个迷你布局，一旦一个元素创建了一个BFC，那么它就包含了所有内容。这样一个迷你布局有着如下特性：

1、BFC内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个常规流）