overflow:hidden通过触发bfc阻止margin塌陷，因其隔离性使子元素margin无法穿透父容器；但会意外裁剪内容，推荐优先使用display:flow-root。
它不是“清除”塌陷，而是让塌陷根本没机会发生——overflow: hidden 触发了 BFC（块级格式化上下文），把子元素的 margin 关进了独立渲染边界里。
为什么 overflow:hidden 能阻止 margin 塌陷
margin 塌陷只在普通文档流中、相邻或父子之间无隔离时发生。一旦父容器形成 BFC，它的内部就自成一派：子元素的 margin-top 不再能“穿透”到父容器的外边距区域，也不会和父容器的 margin 合并。
这不是 overflow 的设计目标，而是规范明确列出的副作用：overflow: hidden、auto、scroll 都是触发 BFC 的合法值。
- 必须加在**发生塌陷的直接父容器**上，加在祖先或子元素上无效
- 该父容器得是块级元素（如
display: block），且不能有 border/padding/content 隔开子元素 margin -
display: flex或display: grid容器本身已是 BFC，再加overflow: hidden多余
它和清除浮动其实是同一原理
不管是解决高度塌陷还是 margin 塌陷，overflow: hidden 起作用的底层机制都是同一个：BFC 的隔离性。BFC 容器会：
- 包含内部浮动元素的高度（所以父容器不塌）
- 限制内部 margin 的传播范围（所以父子 margin 不合并）
- 创建独立的渲染区域，切断与外部的布局耦合
换句话说，你没“修 bug”，只是换了个容器环境——旧问题在新环境里压根不成立。
容易被忽略的副作用比想象中更常踩坑
最典型的是内容被无声裁剪：
- 下拉菜单、
position: absolute提示框、position: fixed导航栏，只要超出父容器边界，全被切掉 - 配合
transform: scale()时，裁剪仍按原始尺寸计算，导致误切 - 设了固定
height又加overflow: hidden，内容超长时用户毫无感知 - 想回退？
overflow: visible不是“关掉功能”，而是放弃 BFC，塌陷立刻重现
真正麻烦的不是它不起作用，而是它起作用了，你还以为一切正常——直到测试阶段弹出个消失的 Tooltip，或者移动端 touchmove 突然卡住。
现代项目该用 display: flow-root 替代
display: flow-root 是专为创建无副作用 BFC 设计的，语义清晰、行为可控：
- 只做一件事：创建 BFC，不裁剪、不干扰
fixed定位、不破坏 transform 动画 - 写法简单：
display: flow-root，无需搭配overflow - 兼容性已足够好：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
- 老项目兜底才用
overflow: hidden；IE 兼容需求可退回伪元素方案
如果你还在靠 overflow: hidden 修 margin 塌陷，大概率是因为没意识到：这个“修复”本身正在悄悄掩盖更深层的布局习惯问题——比如兄弟元素间也塌陷了，那得回到 margin-bottom 统一收口的习惯上去调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
