1. 开启 BFC 的概念与触发条件
1.1 BFC 是什么以及为何存在
在前端布局中，BFC（Block Formatting Context）表示一个独立的块级格式化区域，里面的子元素按照块级排布且彼此不影响区域外的布局。开发者通常通过开启一个新的 BFC 来解决浮动、外边距折叠和边界塌陷等问题。开启 BFC 等于创建一个边界，里面的内容不会与外部盒子混合，从而带来更确定的定位和边距控制。
常见的触发方式包括在父容器上应用某些 CSS 属性，例如 overflow: hidden、overflow: auto、display: flow-root、transform、will-change 等。这些属性中的任意一个都能把容器变成一个独立的 BFC，避免外部元素干扰。
实际场景中，开启 BFC 常用于解决“父子间外边距塌陷”、浮动元素导致的父容器高度塌陷、以及跨列的清除浮动等问题。通过明确边界，页面的垂直间距和高度变得更易预测。
/* 常见的创建 BFC 的方式 */.container-1 { overflow: hidden; } /* 或 overflow: auto; */
.container-2 { display: flow-root; } /* CSS Flow Root 语法 */
.container-3 { transform: translateZ(0); } /* 也会触发 BFC */
2. 开启 BFC 后，兄弟元素还在同一个 BFC 吗？
2.1 兄弟元素在同一 BFC 的条件
当父容器“开启 BFC”后，其内部所有直接子元素通常仍在同一个 BFC 中，这意味着它们的布局受同一边界约束，且彼此之间的垂直外边距会在同一 BFC 内按折叠规则处理。只要没有被某个子元素额外建立独立的 BFC，兄弟之间的边距折叠行为与普通布局一致。
然而，若某个子元素单独创建了一个新的 BFC（例如对该子元素设置 overflow: hidden、display: flow-root、transform 等），它就会把自家内部与后续兄弟分离开来成为独立的 BFC。此时，兄弟之间的外边距折叠就不会跨越该子元素的边界，布局行为会变得不可预测但更可控。
下面的示例说明了不同情景下的边距行为：当父容器开启 BFC 时，两个子元素的垂直边距依然遵循折叠规则；而给第一个子元素设置 overflow: hidden（或 display: flow-root）后，第二个子元素的上边距就不会与第一子元素的下边距折叠，从而改变了父容器的最终高度。
/* 情景一：同一 BFC 内的兄弟，边距折叠发生 */
.parent { /* 假设未创建新的 BFC 或明确边界 */ }
.s1 { height: 40px; margin-bottom: 20px; background: #f88; }
.s2 { height: 40px; margin-top: 30px; background: #8cf; }/* 情景二：第一个子元素创建独立 BFC，阻止与后续兄的边距折叠 */
.s1 { height: 40px; margin-bottom: 20px; background: #f88; overflow: hidden; }
/* 由于 s1 创建了新的 BFC，s2 的 margin-top 不再与 s1 的 margin 折叠 */
.s2 { height: 40px; margin-top: 30px; background: #8cf; }
3. 外边距重叠原理到底是什么？
3.1 边距折叠的基本规则
在垂直方向上，相邻的块级盒子的外边距会发生折叠，最终显示为其中边距的较大值。这一折叠只发生在同一个 BFC 内的“相邻块”之间，因此父子之间的边距也会行为不同，取决于是否存在边框、填充或新的 BFC 边界。边距折叠的核心在于“相邻且未被边界分隔”的两段外边距会合并成一个等效边距。
如果父容器没有为子元素提供边界、填充或新的 BFC，那么第一子元素的顶外边距与父容器的顶边距会折叠；同理，最后一个子元素的底外边距也可能与父容器的底边距折叠。这些折叠导致父容器的实际高度常常比单个子元素的高度要小，从而影响布局的直观性。
要控制这类折叠，最常见的做法是为父容器提供边界（如边框或内边距）或让子元素创建新的 BFC，其中一个直接后果是 父子之间的边距不再简单叠加，而是被边界约束，从而获得可预测的高度。
/* 情景A：普通布局，边距直接折叠 */
.parent { border: none; padding: 0; }
.child1 { height: 40px; margin-top: 20px; background: #f66; }
.child2 { height: 40px; margin-top: 30px; background: #6cf; }/* 情景B：为父容器或其中一个子元素创建 BFC，避免折叠对外部的影响 */
.parent { overflow: hidden; } /* 创建一个外部 BFC */
.child1 { height: 40px; margin-top: 20px; background: #f66; }
.child2 { height: 40px; margin-top: 30px; background: #6cf; }
