overflow:hidden清除浮动的根本原因是触发bfc，使父容器包含浮动子元素高度，但会裁剪溢出内容；现代推荐用display:flow-root替代，语义清晰且无副作用。
overflow:hidden 触发 BFC 是根本原因
它不是“修复”塌陷，而是让塌陷失去发生的土壤。BFC（块级格式化上下文）一旦被触发，其内部的 margin 就不会和外部（包括父级、兄弟级）发生合并。子元素的 margin-top 被限制在父容器的 BFC 边界内，无法再向上“穿透”到父元素的外边距区域。
关键点在于：这不是 overflow 的本职工作，而是浏览器渲染引擎的副作用——overflow: hidden（以及 auto、scroll）是 CSS 规范中明确列出的 BFC 触发条件之一。
它只对特定结构生效，别乱加
必须作用在**发生塌陷的直接父容器**上，且该父容器需满足：是块级元素、处于普通文档流、没有 border/padding/content 隔断子元素 margin。
- 加在子元素或更上层祖先上，完全无效
- 加在
display: flex或display: grid容器上，多余——它们本身已是 BFC - 加在 inline 元素或
position: absolute元素上，不触发 BFC，也不起作用
副作用比你想象中更常踩坑
overflow: hidden 的代价是裁剪所有溢出内容，而这个行为往往在开发阶段不易暴露。
- 下拉菜单、tooltip、绝对定位偏移过大的子元素会被无声截断
- 移动端 Safari 在某些组合下（如配合
transform）可能引发滚动卡顿 - 父容器设了固定
height: 200px，又加了overflow: hidden，内容超长时用户根本看不到提示 - 想回退？
overflow: visible不是“关闭”，而是“放弃 BFC”，塌陷立刻重现
现代项目优先用 display: flow-root
display: flow-root 是专为创建无副作用 BFC 设计的值，语义清晰、行为可控、不裁剪、不干扰滚动逻辑。
兼容性已足够好：Chrome 64+、Firefox 58+、Safari 15.4+；老项目兜底才用 overflow: hidden。
真正容易被忽略的是：靠它修好一个父容器后，如果相邻兄弟容器开始错位，大概率是兄弟间发生了相邻塌陷——那得回到 margin 使用习惯上调整，比如统一只设 margin-bottom。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
