回答这个问题之前，我们先看一下官方的解释。

CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

• 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文

• 在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

• 在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

MDN 对 BFC 的描述

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

一个块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。
• 一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

张鑫旭对 BFC 的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

看了上面这么多的解释，你会发现乱糟糟的 ，除了几个元素会产生BFC以外，你对BFC还是说不清楚。 但是BFC有一个重要重要的原则：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。根据这个特性举两个范例，你就会明白什么是BFC， 范例如下：（父子元素）

image.png

如果父元素没有形成BFC的时候，就包裹不住子元素，子元素就会脱离文档流 ，反之在父元素上添加形成BFC的条件之后

BFC形成

注意这里只是形成了BFC，利 用 BFC 包住浮动元素而已，和清除浮动有异曲同工之妙，但它不是清除浮动！！！！千万别搞混淆。

范例二（BFC兄弟元素之间效果）

如果没有形成BFC，红色边框的gege浮动起来之后，会覆盖绿色边框，

没有形成

这个时候给绿色边框加上形成BFC的属性之后，由于绿色的边框形成了BFC，就会展现特有的属性，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素，泾渭分明

形成BFC
以上就是BFC，定义是讲不清楚的，之后通过代码展现出来，就会恍然大悟，这两个典型的例子就是所谓的BFC

特别鸣谢：饥人谷芳芳老师