子元素的 margin-top 会让父容器一起往下掉是因为相邻块元素垂直 margin 会塌陷，且父容器未形成 bfc 时其上边界与子元素 margin-top 相粘连；overflow: hidden 通过触发 bfc 隔离内部布局来阻止塌陷，但可能截断溢出内容。
为什么子元素的 margin-top 会让父容器一起往下掉
这是块级元素在普通文档流里的默认行为：相邻块元素的垂直 margin 会合并（collapse），而父容器如果没形成 BFC，它的上边界就和第一个子元素的 margin-top “粘”在一起了。结果就是你设了 margin-top: 20px 在子元素上，看起来像整个父容器被往下推了 20px。
overflow: hidden 真的能解决，但得知道它干了啥
给父容器加 overflow: hidden 是最常用的触发 BFC 的方式之一，BFC 容器会隔离内部布局，让子元素的 margin 不再和外部（包括父容器）发生塌陷。但它不是“修复 margin”，而是“建了个结界”。
- 如果父容器本来就有横向内容溢出，
overflow: hidden会直接截断，不是视觉错觉，是真砍掉了 -
overflow: auto或overflow: scroll同样触发 BFC，但可能多出滚动条（尤其 Safari 下overflow: auto对空容器也容易出滚动条） - Flex 或 Grid 容器天然是 BFC，所以用
display: flex或display: grid也能破塌陷，且不带溢出副作用
还有哪些更干净的替代写法
比起硬加 overflow: hidden，这些方式副作用更小、语义更明确：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 父容器加
padding-top: 1px—— 极小代价隔开 margin，几乎无风险 - 父容器加
border-top: 1px solid transparent—— 同样起隔离作用，且不影响盒模型尺寸（如果用了box-sizing: border-box） - 子元素用
margin-top: 0改成padding-top—— 把外边距逻辑转为内边距，彻底绕过塌陷场景
移动端或 CSS-in-JS 场景下要特别留心
iOS Safari 对 overflow: hidden 在某些缩放或 transform 组合下会意外触发渲染 bug，比如固定定位元素闪动；CSS-in-JS 库（如 Emotion）里如果用对象写法，overflow: 'hidden' 可能被自动转成 overflow: 'clip'（新版规范），而 clip 不触发 BFC —— 这时候得显式写成 overflow: 'hidden !important' 或换别的 BFC 触发方式。
塌陷本身不难解，难的是解法悄悄带着副作用。选方案前，先看父容器有没有溢出、要不要滚动、是否在动画流程里——有时候加一行 padding-top: 0.1px 比改 overflow 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
