最稳妥的是overflow: hidden，但会裁剪溢出内容；现代项目优先用display: flow-root——前者靠触发bfc阻止margin穿透却附带裁剪等副作用，后者专为无副作用创建bfc而设计，语义清晰且不干扰绝对定位、阴影等视觉表现。
直接给父元素触发 BFC 就能阻止 margin 穿透，最稳妥的是 overflow: hidden，但要注意它会裁剪溢出内容；现代项目优先用 display: flow-root。
为什么 overflow: hidden 能阻止穿透但常出问题
它强制父元素创建 BFC，把子元素的 margin-top “关”在内部，不再和父元素或 body 的边界合并。但副作用很实在：
-
overflow: hidden会裁剪所有超出父容器的内容：比如position: absolute的下拉菜单、box-shadow、tooltip - 在旧版 Safari 中配合
transform可能引发闪烁 - 如果父容器里混有浮动元素和普通块级子元素，虽然清了浮动，但子元素之间仍可能继续塌陷（BFC 隔离的是父子/内外，不是内部兄弟）
display: flow-root 是什么，为什么更推荐
它是专为创建无副作用 BFC 设计的 display 值，Chrome 64+/Firefox 62+ 已稳定支持：
- 同样阻断 margin 穿透，但不裁剪、不滚动、不影响
position: absolute定位 - 不会干扰
border-radius或背景渐变的视觉表现 - 语义明确：
flow-root表示“这个容器要独立管理内部流式布局”，比靠overflow: hidden“凑效果”更干净 - 注意：它只对块级上下文生效，不能用于
inline元素或已设display: flex的容器
加 padding-top: 1px 或 border-top 看似简单，实际要小心
它们靠物理分隔打破塌陷条件，但细节容易翻车：
-
border-top: 1px solid transparent有效，但border: none或border-width: 0无效——必须真实存在且宽度 > 0 - 加了
border后，若父元素有width: 100%却没设box-sizing: border-box，总宽会超 100% -
padding-top: 1px虽轻量，但如果子元素依赖height: 100%，可能导致高度计算失准 - Tailwind 用户注意：
border-transparent在 purge 阶段可能被误删，线上失效
哪些情况 display: flex 或 display: grid 不是解法
它们确实自动触发 BFC，但仅当容器本就用 Flex/Grid 布局时才顺带解决 margin 穿透：
- 如果只是为了防穿透而强行加
display: flex，会彻底改变子元素排布逻辑（比如块级子元素默认变成行内排列） -
gap属性不能替代margin解决穿透问题——它是布局间隙，不参与 margin 合并机制 - 子项如果是 flex 容器里的块级元素（如
div），它和它的子元素之间仍可能发生塌陷
真正关键的不是选哪个方案，而是确认你加的样式是否被 JS 逻辑隐式依赖：比如某个动画读取 offsetHeight，或插件靠 getBoundingClientRect() 计算位置——这些地方不报错，但尺寸偏移会悄悄发生。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
