BFC

最近在准备面试，真巧一次面试中也涉及到 BFC 概念，当然我回答：不知道。但其实我们平时的开发中，却时刻在利用 BFC 特性在处理样式问题。

BFC 又称 Block Formatting Context （块状格式化上下文）

MDN 解释：

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

好吧，我看了这段解释也是似懂非懂。

大概意思是：BFC 是 CSS 渲染页面环节中的一部分。在块级盒子布局的范围中出现，并且它也影响着浮动元素和其他元素。

哪些方式会创建 BFC ？

通过以下方式，能创建一个 BFC 规范的布局（根据我熟悉的程度简单划分几类，如下）：

平时常用

• 根元素是 html
• 设置 float 的元素（脱离文档流）
• position: absolute | fixed（脱离文档流）
• block 元素设置 overflow （非 visible，内容不被加工处理，直接显示）
• display: inline-block
• display: flex | inline-flex
• display: grid | inline-grid

不常用（table 系）

• display: table-cell（table 单元格 cell 默认为此样式）
• display: table-caption（table caption 默认为此样式）
• display: table, table-row, table-row-group, table-header-group, table-footer-group

不常用

• display: flow-root
• 设置 contain: layout, content, paint 的元素
• column-count or column-width 不为 auto 的元素（包括 column-count: 1）
• column-span: all

实际应用举例（摘自 MDN）

通过几个例子，感性的理解下 BFC 在实际场景中的作用：

margin 塌陷

首先我们知道当在相邻的块级元素的 margin 会发生合并现象（称为：外边距折叠）

通常会发生在：相邻元素，父子元素 margin 接触处，或者一个空的块级元素。