overflow:hidden能包裹浮动子元素是因为触发bfc，使父容器将浮动元素高度纳入自身计算；但会裁剪溢出内容，推荐用display:flow-root替代。
overflow: hidden 为什么能包裹浮动子元素
它不是靠“隐藏”来修复，而是触发了 BFC（块级格式化上下文）。BFC 容器天然会把内部浮动元素的高度纳入自身高度计算——这是规范行为，不是 hack。只要父元素是块级、非替换元素、没设 height 或 max-height，加 overflow: hidden 就能立刻让高度“回来”。
但注意：overflow: visible（默认值）不触发 BFC，所以加了也白加；overflow: auto 和 overflow: scroll 同样有效，只是表现不同。
哪些场景下 overflow: hidden 会出问题
它最常被误用的地方，是掩盖了真实布局意图：
- 父容器里有
position: absolute的下拉菜单或 tooltip，会被直接裁掉一半 - 卡片内含横向滚动的标签栏，
overflow: hidden会让scrollLeft失效 - 用了
transform: translateY(-10px)或负margin的装饰元素，边缘被切掉 - 配合
box-shadow或圆角时，阴影/弧度被截断，视觉上“缺了一块”
display: flow-root 是更干净的替代方案
display: flow-root 是专为创建无副作用 BFC 设计的属性，Chrome 64+ / Firefox 62+ / Safari 15.4+ 都已稳定支持。它和 overflow: hidden 一样能包裹浮动子元素，但完全不干预溢出行为——下拉菜单照常展开，滚动照常工作，阴影完整显示。
如果项目不需要兼容 IE 或老 Android WebView，优先写：
.parent {
display: flow-root;
}
而不是靠 overflow: hidden 硬扛。伪元素清除法（::after { content: ""; display: table; clear: both; }）虽然兼容性更好，但多一层样式逻辑，维护成本略高。
加了 overflow: hidden 却没效果？先检查这三点
不是代码写错了，而是前提不满足：
- 父元素的
display是inline或inline-block？得先设成block或flow-root - 子元素的
float在 computed 样式里是不是none？可能是被后续 CSS 覆盖了 - 父元素写了
height: 200px或max-height: 300px？固定高度会锁死计算，BFC 也救不了
真正容易被忽略的，是把“父元素高度恢复了”当成问题终结——浮动本身还在，只是被 BFC 包裹了。一旦你后续把某个子元素改成 position: absolute，或者混用 float 和 flex，塌陷可能悄悄回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
