BFC 的「结界」：隔离元素，优化布局

今天我们来聊一聊一个有点「玄学」的概念——BFC。对初学者来说，BFC 经常让人感到困惑。

BFC，全称 Block Formatting Context，也就是块级格式化上下文。 它是一个「无形的框框」，影响元素的布局和渲染。形象地说，就像一个「结界」，让「框框」内的元素自成一统，不受外部元素的影响。

如何触发 BFC？

触发 BFC 很简单，只要让元素满足以下条件之一即可：

• 浮动（float）
• 绝对定位（position: absolute/fixed）
• 行内块元素（display: inline-block）
• 表格单元格（table-cell）
• 表格标题（table-caption）
• overflow 设为非可见值（overflow: hidden/scroll/auto）
• display 为 flex/grid/inline-flex

BFC 的规则

一旦元素触发了 BFC，它就进入了一个「结界」之中，里面的元素遵循以下规则：

• 垂直排列： BFC 内的块级元素（如 div、p）垂直排列，就像一个个堆叠的方块。
• 块状特性： BFC 本身是一个块级元素，所以它的宽度和高度都可以由 CSS 设置。
• 包含浮动： BFC 可以包含浮动的元素，而且浮动元素不会脱离 BFC。
• 隔离边距重叠： BFC 内的元素边距不会与外部元素重叠，即使设置了 margin-collapse。

BFC 解决了什么问题？

BFC 主要解决了以下两个问题：

• 浮动元素脱离文档流： 浮动元素会脱离文档流，导致后面元素「绕过」它。而 BFC 可以「关住」浮动元素，让后面的元素正常排列。
• 边距重叠： 当相邻元素的边距重叠时，会产生难看的间隙。BFC 可以隔离边距，防止重叠。

举个例子

我们来看一个例子：

<div style="width: 200px; height: 200px; overflow: hidden;">
  <div style="float: left; width: 100px; height: 100px; background: red;"></div>
  <div style="width: 100px; height: 100px; background: blue;"></div>
</div>

如果没有 BFC，蓝色的 div 会被挤到红色的 div 下面，因为红色的 div 是浮动的。但是，如果给红色的 div 设置了 overflow: hidden，它就会触发 BFC，蓝色的 div 就不会被挤到下面了。

总结一下

BFC 是一个「结界」，它影响元素的布局和渲染。触发 BFC 可以解决浮动元素脱离文档流和边距重叠的问题。理解 BFC 有助于你编写出更优雅的 CSS 代码。