overflow:hidden通过触发bfc解决高度塌陷，原理是创建独立渲染区域使父容器包含浮动子元素；但会裁剪溢出内容，现代推荐优先使用display:flow-root。
overflow:hidden 触发 BFC 隔离外边距
它不是“挡住”了 margin，而是让父元素创建了一个新的**块级格式化上下文（BFC）**。BFC 的核心规则之一是：内部盒子的垂直 margin 不会与外部（包括父级、兄弟级）发生合并。子元素的 margin-top 被限制在这个独立渲染区域内，不再“穿透”到父容器外边，布局错位自然消失。
必须满足三个前提：
- 作用对象是发生塌陷的**父级块级元素**（
display: block或inline-block等） - 父元素不能是
display: flex或display: grid容器（它们本就不触发塌陷） - 不能写在子元素上——对子元素设
overflow: hidden无效
为什么 border 或 outline 效果不同
border-top: 1px solid transparent 有效，outline 无效，根本区别在于是否参与盒模型和 BFC 触发条件。
根据 CSS 规范，以下属性能触发 BFC：
-
overflow值为hidden、auto、scroll（但不包括visible） -
display: flow-root（专为此设计） -
float不为none -
position为absolute或fixed -
border不为none（哪怕transparent）
outline 是绘制层装饰，不占空间、不改变格式化上下文，所以完全无法阻止塌陷。
overflow:hidden 的真实副作用比想象中更常见
它确实“修好了塌陷”，但也可能顺手切掉你真正需要的东西：
- 含
position: absolute的下拉菜单、Tooltip、气泡框——超出父边界部分直接不可见 - 父容器有
box-shadow或伪元素延伸出边界——阴影/装饰被硬裁剪 - 父容器本就需要横向滚动（如长表格、轮播图）——
overflow: hidden直接禁用滚动 - 动画中动态切换
overflow值——可能触发重排（reflow），低端设备卡顿明显
现代项目该优先用什么替代方案
除非你明确知道内容不会溢出，否则别默认选 overflow: hidden。更安全的解法：
-
display: flow-root：语义清晰、零裁剪风险、Chrome 64+/Firefox 58+/Safari 15.4+ 支持；可用@supports (display: flow-root)安全降级 -
border-top: 1px solid transparent：兼容 IE6+，视觉无影响，但若父容器已有border，需额外覆盖 -
::before { content: ""; display: table; }：IE8+ 兼容，但伪元素会参与高度计算（哪怕height: 0）
真正容易被忽略的是：塌陷常藏在第三方组件里——比如一个 Card 默认带 margin-bottom: 1rem，嵌进没 padding 没 border 的 Section，整个区块就悄悄上移了。调试时先看 computed 样式里的 “Margin Top” 实际值，再查父容器是否意外含空白字符（换行、空格），这些都可能干扰 BFC 触发时机。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
