浮动使父元素塌陷并引发外边距合并，本质是父元素未形成独立bfc而与兄弟元素共用同一bfc；overflow:hidden可稳妥触发bfc，修复塌陷并隔离外边距合并。
为什么浮动会让父元素“塌陷”并引发外边距合并
浮动元素脱离文档流，导致父容器无法感知子元素高度，计算高度时变成 0；此时如果父元素和相邻块级元素之间存在垂直外边距，浏览器会按规则合并它们——这不是 bug，是 CSS 规范定义的行为。关键点在于：**外边距合并只发生在块级盒（block box）之间，且双方都处于同一个 BFC（块级格式化上下文）中**。
所以问题本质不是“浮动导致外边距合并”，而是“浮动让父元素没形成独立 BFC，于是它和兄弟元素共用一个 BFC，进而触发了外边距合并”。
用 overflow 触发 BFC 是最稳妥的方案
overflow 值为 hidden、auto 或 scroll 时，元素会创建新的 BFC，从而隔离内外布局影响。相比其他方式，它兼容性好（IE6+）、副作用可控、不改变布局语义。
- 别用
overflow: visible—— 它不触发 BFC - 慎用
overflow: auto在移动端：可能意外出现滚动条（尤其内容刚好溢出时） - 避免用
overflow: hidden如果父容器本就需要显示溢出内容（比如动画移入、下拉菜单） - 不需要加
zoom: 1（IE hack）了，现代项目基本不用考虑 IE6–7
示例：
立即学习“前端免费学习笔记（深入）”；
.parent {
overflow: hidden; /* 关键：创建 BFC */
}
.child {
float: left;
}其他触发 BFC 的方法及其适用场景
不同属性触发 BFC 的条件和副作用差异很大，选错反而引入新问题。
-
display: flow-root：语义最干净，专为解决此问题设计（Chrome 64+/Firefox 59+/Safari 15.4+），但不支持 IE 和旧版 Safari -
position: absolute或fixed：会脱离文档流，父元素不再占位——这通常不是你想要的 -
float: left或right：父元素自己浮动，会导致它也脱离文档流，影响后续布局 -
display: table-cell或table-caption：强制变成表格相关盒类型，可能破坏原有 display 语义和盒模型表现
结论：除非明确需要 flow-root 的现代语义，否则优先用 overflow: hidden。
外边距合并是否真的被“修复”了？要看上下文
触发 BFC 后，父元素自身高度恢复正常，但它和兄弟元素之间的外边距是否还合并，取决于兄弟元素是否也在同一 BFC 中。
- 如果兄弟元素也在同一个父级 BFC 内（比如同级的两个
div），那它们之间仍可能合并 - 只有当其中一个元素创建了**独立的 BFC**，合并才会中断
- 也就是说：
overflow: hidden解决的是父容器塌陷 + 子浮动导致的连锁外边距异常，不是全局禁用外边距合并
容易忽略的一点：BFC 边界必须清晰。比如给父元素加 border 或 padding 不会触发 BFC，也不会阻止外边距合并——它只是让父容器有“可见边界”，但没切断格式化上下文。
