overflow: hidden能阻止margin塌陷是因为触发bfc，将子元素margin-top“关”在内部不与父边界合并；但会裁剪absolute下拉菜单、box-shadow等溢出内容，副作用明显，仅适用于内容完全可控的简单容器。
为什么 overflow: hidden 能止住 margin 塌陷，但别乱用
它强制父元素创建 BFC，把子元素的 margin-top “关”在内部，不再和父元素的上边缘合并。但副作用很实在：overflow: hidden 会裁剪所有溢出内容——position: absolute 下拉菜单、box-shadow、横向滚动条，全可能被切掉。
适用场景有限：
- 内容完全可控、确定不会溢出的容器（比如头像框、固定尺寸卡片）
- 老项目需兼容 IE8+，且无弹层/阴影等复杂交互
- 临时调试时快速验证是否为塌陷问题
慎用于含 dropdown、tooltip 或需要横向滚动的区域。
display: flow-root 是现代项目的首选方案
display: flow-root 是专为创建 BFC 设计的值，语义清晰、副作用极小：不改变盒模型尺寸，不裁剪 box-shadow，也不干扰 position: absolute 子元素定位。
浏览器支持已足够稳定：
- Chrome 64+ / Firefox 59+ / Edge 79+ / Safari 15.4+
- 2026 年绝大多数生产环境可直接使用
- IE 完全不支持，需降级处理（如加
padding-top: 0.1px）
写法就是一行：.parent { display: flow-root; }
用 padding 或 border 打断塌陷，要注意尺寸变化
给父元素加 padding-top: 1px 或 border-top: 1px solid transparent，能直接破坏塌陷触发条件（规范要求“中间无 border/padding”），且兼容性拉满。
但它们不是零成本：
-
padding-top: 1px会让父容器高度 +1px，可能影响垂直居中或 flex 对齐 -
border-top会增加 1px 边框宽度，若父容器有box-sizing: content-box（非默认），实际尺寸会变 -
padding-top: 0.1px视觉不可见，又几乎不影响布局，是组件库封装时的轻量选择
flex/grid 容器天然防塌陷，但 gap ≠ margin
display: flex 或 display: grid 的父容器自动成为 BFC，所以子元素的 margin-top 不会穿透。但注意：
- 子项如果是块级元素（比如
div），它和它的子元素之间仍可能发生父子塌陷 -
gap是布局容器原生间距，值不参与 margin 合并，但它不能替代子元素自身的margin语义 - 别在 flex/grid 容器自身再设
margin来“补空隙”，那只是把问题换了个地方重现
真正容易被忽略的是：塌陷常成片出现。修好一个父容器后，相邻兄弟元素突然错位，大概率是它们之间发生了兄弟级 margin 合并——这时候该统一用 margin-bottom 控制间距，而不是堆砌 BFC。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
