overflow: hidden 通过触发bfc阻止外边距塌陷，但会裁剪溢出内容；推荐用于内容可控的容器，慎用于含下拉菜单等场景，现代首选 display: flow-root。
直接加 overflow: hidden 能解决大多数父子级垂直外边距塌陷，但它不是“万能胶”——用错地方反而会遮盖真实问题或引入新 bug。
为什么 overflow: hidden 能阻止塌陷
它会强制父元素创建一个新的 BFC（块级格式化上下文），而 BFC 的核心特性之一就是：内部的 margin 不再和外部（包括父级、兄弟级）发生合并。子元素的 margin-top 就被“关进”了这个独立渲染区域里，不会再穿透上去影响父容器位置。
- 只对**块级元素**生效；
inline或flex容器内不适用（本身就不塌陷） - 必须作用在**发生塌陷的父容器**上，而不是子元素或更上层祖先
- 不需要配合其他样式，单条声明即可触发 BFC
overflow: hidden 的副作用比你想象中更常见
它真正的问题从来不是“不能阻止塌陷”，而是“阻止之后顺手把别的东西也切掉了”。
- 任何超出父容器的内容（比如下拉菜单、tooltip、横向滚动区、绝对定位偏移过大的子元素）都会被裁剪，且无提示
- 在响应式场景中，如果父容器宽度随视口收缩，原本可见的溢出内容可能突然消失
- 搭配
transform或will-change时，某些浏览器会额外创建图层，影响性能或触发意外重绘 - 无法通过
overflow: visible回退——因为visible是默认值，不触发 BFC，塌陷立刻重现
什么情况下该用，什么情况下该换别的方案
判断依据不是“能不能用”，而是“值不值得为它承担裁剪风险”。
- ✅ 推荐用：
overflow: hidden适合内容完全可控、确定不会溢出的容器，比如纯卡片、头像框、固定尺寸 banner - ⚠️ 慎用：含 dropdown、popover、modal、横向滑动列表的区域——优先改用
display: flow-root - ❌ 别硬套：父容器本身需要支持滚动（如聊天记录区），此时应改用
overflow: auto或scroll，它们同样触发 BFC 且允许滚动 - ? 替代提醒：
display: flow-root是现代首选，无裁剪副作用，Chrome 64+/Firefox 58+ 兼容良好；老项目兜底才用overflow: hidden
真正容易被忽略的点是：塌陷往往不是孤立现象。如果你靠 overflow: hidden 修好了一个父容器，但相邻兄弟容器又开始错位，大概率是兄弟间也发生了相邻塌陷——那得回到 margin 使用习惯上调整，比如统一只设 margin-bottom，而不是到处加 overflow。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
