完整名称：（块级格式化上下文）「block formatting context」

定义

BFC 是 CSS 中页面的一块独立渲染区域，内部元素的渲染遵循特定规则，与区域外部的元素相互隔离。

触发条件

• html 根元素（整个文档的根元素自动成为 BFC）。
• 元素的 float 属性值不是 none（即设置了浮动 left 、 right）。
• 元素的 position 属性值是 absolute（绝对定位）或 fixed（固定定位）。
• 元素的 display 属性值是 inline-block、table-cell、flex、table-caption、inline-flex 等。
• 元素的 overflow 属性值不是 visible（如 auto、hidden、scroll）。

特点

1. 同一个 BFC 内部的盒子会按照正常文档流一个接一个地放置。
2. BFC 内部的元素垂直方向的距离由margin决定，属于同一个 BFC 的两个相邻元素的margin会发生重叠。
3. BFC 的区域不会与浮动盒子重叠。
4. BFC 是一个隔离的独立容器，容器里面的子元素不会影响外面的元素，反之亦然。

作用

1.清除浮动

计算 BFC 的高度时，自然也会检测浮动或者定位的盒子高度。

只要把父元素设为 BFC 就可以清理子元素的浮动了，最常见的用法就是在父元素上设置 overflow: hidden 样式，对于 IE6 加上 zoom: 1 就可以了。

原理：

• 浮动元素会脱离文档流，导致后续元素围绕浮动元素排列。
• 当一个元素形成了 BFC 时，BFC 会包含所有子元素的浮动，因此 BFC 内部的元素不会与 BFC 外部的浮动元素重叠。

通过创建 BFC，浮动元素不再影响 BFC 的元素布局，解决了浮动元素导致的文字环绕问题。