overflow: hidden 有效是因为触发 BFC，隔离子元素 margin 塌陷；但会裁剪溢出内容、干扰定位与动画，推荐 display: flow-root 或 padding-top: 1px 等更安全方案。
直接用 overflow: hidden 能解决子元素 margin-top 或 margin-bottom 导致父元素“被撑开”的问题，但它不是万能补丁——触发 BFC 是对的，副作用得自己兜住。
为什么 overflow: hidden 有效？
它强制父元素创建一个新的块级格式化上下文（BFC），而 BFC 内部的 margin 不会和外部（包括父元素自身边界）发生塌陷。这不是“修复 margin”，是建了个隔离区。
关键点在于：塌陷只发生在普通流中的块级盒之间；一旦父元素成为 BFC 容器，子元素的 margin-top 就只能在它内部起作用，不会再“穿透”出来影响父容器的位置或高度计算。
overflow: hidden 的实际风险有哪些？
它最常被忽略的问题不是功能失效，而是视觉/行为副作用：
-
overflow: hidden会真实裁剪溢出内容——比如子元素用了position: absolute且偏移出父容器范围，这部分会被砍掉 - 在 iOS Safari 中，若父元素同时有
transform、scale或固定定位子项，overflow: hidden可能触发渲染异常（如闪动、滚动条误出现） - CSS-in-JS 库（如 Emotion）中，对象写法的
overflow: 'hidden'在新版中可能被自动转为overflow: 'clip'，而clip不触发 BFC —— 此时得显式加!important或换方案 -
overflow: auto虽也触发 BFC，但在 Safari 下对空容器或某些缩放场景容易多出滚动条
有没有更轻量、副作用更小的替代写法？
有，而且往往更适合微调场景：
-
padding-top: 1px：极小代价打破塌陷条件，几乎无视觉影响；注意它会让父元素高度+1px，如果布局对像素敏感需校准 -
border-top: 1px solid transparent：同样打断塌陷，且在box-sizing: border-box下不增加总尺寸 -
display: flow-root：专为创建 BFC 设计，语义清晰、无裁剪/定位副作用；Chrome 64+/Firefox 62+ 支持，现代项目可放心用 -
::before { content: ""; display: table; }：伪元素触发 BFC，不影响 DOM 结构，兼容性好（IE8+），但多了一层匿名表格渲染
什么时候不该硬上 overflow: hidden？
当父容器本身就有横向溢出内容、需要支持平滑滚动、正在做动画（尤其含 transform）、或子元素依赖绝对定位脱离文档流时，overflow: hidden 就不是“顺手一加”的事了。这时候宁可用 padding-top: 0.1px 或 display: flow-root，哪怕多查一次 Can I Use 兼容表。
真正容易翻车的，从来不是不知道怎么加 overflow，而是加完没验证溢出行为、没测 Safari、没看伪元素是否意外干扰了 flex 子项的对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
