overflow:hidden能撑开父容器高度是因为触发bfc，使浮动子元素参与高度计算；但会裁剪溢出内容，现代推荐语义更清晰、无副作用的display:flow-root。
overflow: hidden 能“清除浮动”不是因为它“清”了什么，而是它触发了 BFC，让父容器重新把浮动子元素算进高度计算里——这是最常被误解的起点。
为什么 overflow: hidden 会撑开父容器高度
常见错误现象：parent 高度为 0，背景色/边框不显示，后续兄弟元素上移；加了 overflow: hidden 后突然“有高度”了。
根本原因不是“清除”，而是：当 overflow 值不为 visible（如 hidden、auto、scroll）时，该块级元素会创建一个新的 BFC；而 BFC 的一条核心规则是——「计算自身高度时，内部浮动元素的几何尺寸必须参与」。
这意味着父容器不再忽略浮动子项，自然就撑开了。
注意点：
-
overflow: hidden不改变子元素的float行为，它只是让父容器“看见”它们 - 副作用明显：会裁剪所有溢出内容，比如带阴影、下拉菜单、tooltip 的子元素可能被意外截断
- 它不解决 margin 塌陷的“跨边界”问题，只阻断 BFC 边界外的干扰
display: flow-root 是更干净的替代方案
现代项目中，display: flow-root 应该是首选，它专为创建无副作用 BFC 而生。
使用场景：需要包含浮动、防止 margin 塌陷，又不能接受裁剪、也不愿用 flex 或 grid 改变原有布局流时。
优势对比：
- 效果一致：能包含浮动、隔离 margin 计算，和
overflow: hidden在布局行为上等效 - 零副作用：不隐藏溢出，不干扰
float、不重置position: static子元素的默认定位 - 语义清晰：
flow-root明确表达了“我要一个纯内容流的根级 BFC”，比overflow: hidden更可维护
兼容性注意：display: flow-root 在 Chrome 64+、Firefox 59+、Safari 15.4+ 已稳定支持；IE 完全不支持，若需兼容 IE，仍得回退到 overflow: hidden 或伪元素 clearfix。
BFC 内部依然会发生 margin 塌陷
这是最容易被忽略的关键点：BFC 只阻止「跨 BFC 边界」的干扰，不消除「BFC 内部」的 margin 合并逻辑。
典型例子：父子元素间上下 margin 合并——父元素没边框/内边距，子元素设了 margin-top: 20px，结果父元素顶部外边距直接“变成”子元素的值。
解决方式不是加 BFC 就万事大吉，而是要明确「隔离内外」：
- 给父元素触发 BFC（如
overflow: hidden或display: flow-root） - 或更轻量地加
border/padding，也能打断 margin 合并（因为有了“分隔层”） - 兄弟元素间的垂直 margin 塌陷同样适用此规则：只要它们同属一个 BFC，就会合并
哪些 display 值会触发 BFC，但要注意副作用
除 flow-root 和 overflow 外，还有多个 display 值能触发 BFC，但工程中需谨慎选择：
-
display: flex/grid：子项自动形成 BFC，但会完全忽略子元素的float声明——这不是“清除”，是“废掉” -
display: inline-block/table-cell：会改变元素的盒模型类型，可能破坏原有行内流或对齐预期 -
float/position: absolute：虽能触发 BFC，但会让元素脱离文档流，影响后续布局，基本不用于“修复”目的
真正适合做“BFC 修复层”的，只有三类：语义明确的 flow-root、兼容性广的 overflow: hidden/auto、以及不改布局流的 border / padding 方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
