块级格式化上下文

什么是 BFC？

块级格式化上下文，全称 Block Formatting Context，简称 BFC。

它是一块独立的渲染区域，它规定了在该区域中常规流元素的布局。

• 常规流块盒在水平方向上，必须撑满包含块。
• 常规流块盒在包含块的垂直方向上依次摆放。
• 常规流块盒若外边距无缝相邻，则进行外边距合并。
• 常规流块盒的自动高度和摆放位置，无视浮动元素。

那么，渲染区域 又是什么呢？

渲染区域，由某个 HTML 元素创建，以下元素会在其内部创建 BFC 区域：

• 不同的 BFC 区域在渲染时互不干扰。

• 创建 BFC 的元素，隔绝了内部和外部的联系，内部的渲染不会影响到外部。

渲染的 具体规则 如下：

• 创建 BFC 的元素，它的自动高度需要计算浮动元素。
• 创建 BFC 的元素，它的边框盒不会与浮动元素重叠。
• 创建 BFC 的元素，不会和它的子元素进行外边距合并。