overflow:hidden触发bfc是根本原因，它强制创建独立渲染区域，使内部margin不与外部合并，从而阻断父子及兄弟间垂直margin塌陷，但会裁剪溢出内容。
overflow:hidden 触发 BFC 是根本原因
它不是靠“隐藏溢出”起作用，而是浏览器检测到 overflow: hidden 后，强制为该元素创建一个新的块级格式化上下文（BFC）。BFC 的核心规则之一就是：内部的 margin 不会与外部元素（包括父级、兄弟级）发生合并。所以父子间、兄弟间的垂直 margin 塌陷自然被阻断。
为什么加了 overflow:hidden 就不塌陷了
当父容器未形成 BFC 时，它的上边界和第一个子元素的 margin-top 实际上是“共享同一段空白区域”的——浏览器把它们当成一个整体来计算间距。而一旦父容器变成 BFC，它就建起一道隔离墙，子元素的 margin-top 只在内部生效，不再向上“传染”。
常见错误现象：margin-top 设在子元素上，结果整个父容器往下移，而不是子元素相对于父容器内顶边下移。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 这不是 bug，是 CSS 规范定义的 margin collapsing 行为
- 触发 BFC 的方式不止这一种：
display: flex、display: grid、display: flow-root、float: left等都有效 -
overflow: auto和overflow: scroll同样触发 BFC，但可能意外出现滚动条（尤其 Safari 对空容器）
容易被忽略的副作用
最常踩的坑是：以为只是“加个属性”，却没意识到它真实改变了渲染模型。
- 如果父容器里有
position: absolute子元素超出边界，会被真截断，不是视觉遮罩 - box-shadow、下拉菜单、tooltip 等依赖溢出的内容，可能突然消失
- CSS-in-JS 库（如 Emotion）中，
overflow: 'hidden'可能被自动转成overflow: 'clip'—— 而clip不触发 BFC，必须显式写overflow: 'hidden !important'或换方案 - iOS Safari 在缩放 + transform 组合下，
overflow: hidden可能引发固定定位元素闪动
更干净的替代写法有哪些
如果你只想要阻止塌陷，又不想承担 overflow: hidden 的副作用，这些方式更轻量：
-
display: flow-root：专为此设计，无溢出裁剪、无尺寸变化、语义清晰；但 IE 完全不支持 -
padding-top: 0.1px或border-top: 1px solid transparent：用物理隔离打破塌陷条件，兼容性好，几乎零风险 - 把子元素的
margin-top改成padding-top：从源头绕过 margin 合并逻辑，适合可控的子元素结构 - 改用
display: flex; gap: 20px：gap 不参与 margin 合并，且响应式友好；但注意别再给 flex 容器自身加 margin 来“补间距”
选哪个方案，取决于你是否控制父容器的溢出行为、是否要兼容老浏览器、以及有没有绝对定位或阴影等依赖溢出的视觉元素——有时候加一行 padding-top: 0.1px 比重构整个布局更实际。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
