如何避免CSS垂直外边距塌陷问题？给父元素添加overflow属性行吗？

本文共计822个文字，预计阅读时间需要4分钟。

直接加 overflow: hidden; 可以解决大量父子级垂直外边距塌陷的问题，但它不是万能的——用错误的方式反而会隐藏实际问题或引入新bug。

为什么 overflow: hidden 能阻止塌陷

它会强制父元素创建一个新的 BFC（块级格式化上下文），而 BFC 的核心特性之一就是：内部的 margin 不再和外部（包括父级、兄弟级）发生合并。子元素的 margin-top 就被“关进”了这个独立渲染区域里，不会再穿透上去影响父容器位置。

• 只对**块级元素**生效；inline 或 flex 容器内不适用（本身就不塌陷）
• 必须作用在**发生塌陷的父容器**上，而不是子元素或更上层祖先
• 不需要配合其他样式，单条声明即可触发 BFC

overflow: hidden 的副作用比你想象中更常见

它真正的问题从来不是“不能阻止塌陷”，而是“阻止之后顺手把别的东西也切掉了”。