overflow: hidden 能“止住” margin 折叠，是因为它触发 bfc，使父子元素脱离同一格式化上下文，从而阻断外边距重叠；但会裁剪溢出内容，推荐优先使用 display: flow-root。
overflow: hidden 为什么能“止住” margin 折叠
它不是在修复 margin，而是让父容器创建一个新的 BFC（块级格式化上下文），把子元素“关进独立房间”。外边距重叠只发生在同一 BFC 内的相邻块级盒之间，一旦父子不再同处一个 BFC，子元素的 margin-top 就无法向上“穿透”到父容器了。
注意：overflow: visible 是默认值，不触发 BFC；只有 overflow: hidden、overflow: auto、overflow: scroll 才真正生效。但别用 overflow-x: hidden; overflow-y: visible —— 浏览器行为不一致，靠不住。
哪些场景下加 overflow: hidden 反而会出问题
它确实见效快，但副作用很实在：
-
position: absolute子元素超出父容器时直接消失 - 下拉菜单、tooltip、
box-shadow被裁剪 - 配合
transform或动画时，在旧版 Safari 中可能闪烁或错位 -
<select></select>或日期控件的弹层被截断 - 移动端 Safari 遇到
touch-action时可能抑制滚动
这些不是边缘 case，而是真实项目里高频踩坑点。
兄弟元素之间的 margin 折叠，overflow: hidden 不管用
给两个并列的 <div> 都加上 <code>overflow: hidden，它们的上下 margin 依然会合并——因为它们仍在同一个父容器的 BFC 内。BFC 隔离的是“容器与其后代”，不是“同级兄弟”。
正确做法是：只把其中一个兄弟包进一层新容器，并设 display: flow-root 或 overflow: hidden。例如：
<div class="wrapper"> <div class="box1"></div> <div class="bfc-wrapper"><div class="box2"></div></div> </div>
然后给 .bfc-wrapper 加 overflow: hidden 或 display: flow-root。
比起 overflow: hidden，display: flow-root 更值得优先考虑
display: flow-root 是专为创建 BFC 设计的，Chrome 64+、Firefox 58+、Safari 15.4+ 全支持，且无裁剪、无滚动条、不干扰定位。
如果你只是想阻止 margin 折叠，又没兼容 IE 的硬性要求，直接用 display: flow-root 更稳妥。而 overflow: hidden 只适合两种情况：父容器本就需要隐藏溢出（比如卡片截断文本），或者必须兼容 IE8–10。
真正容易被忽略的，是“是否真需要 BFC”——如果父容器已有 border 或 padding，折叠本就不会发生，加再多 overflow: hidden 都是冗余。
