overflow: hidden 通过触发 bfc 使父容器包含浮动子元素、恢复高度和背景色，但会裁剪溢出内容；更优解是 display: flow-root，兼容现代浏览器且无副作用。
背景颜色没丢，是父容器高度塌陷成 0 了——overflow: hidden 能“修好”，但不是因为它“清浮动”，而是它触发了 BFC，让父容器重新包含浮动子元素。
为什么 overflow: hidden 会让背景色回来
浮动元素（float: left 或 float: right）会脱离普通文档流，父容器计算高度时直接忽略它们，结果 height 变成 0px，background-color 自然无处可画。而 overflow: hidden 会强制父容器生成一个新的 BFC（块级格式化上下文），BFC 的规则之一就是：容器必须包含其内部的浮动子元素，并据此重新计算自身高度。
这不是“清除浮动”的功能，是 BFC 的附带效果。所以只要父容器是块级、没设固定 height，且子元素全是浮动的，加这行就见效。
-
overflow: hidden在 IE8+ 全平台可用，兼容性最好 - 不需要改 HTML 结构，一行 CSS 就能临时修复
- 它不改变子元素的 float 行为，适合紧急上线补丁
overflow: hidden 容易被忽略的裁剪副作用
它确实快，但不是静默开关。很多视觉异常都是因为加了这行却没检查后续渲染：
- 子元素用了
position: absolute且超出父容器边界（比如下拉菜单、tooltip），会被直接裁掉，而不是溢出显示 - 父容器有
border-radius+box-shadow，圆角生效，但阴影也会被一并砍掉 - 父容器本该滚动（内容超长），
overflow: hidden会把滚动条干掉，此时应换overflow: auto - 在
display: flex或display: grid容器上误加，可能干扰align-items或justify-content的对齐行为
比 overflow: hidden 更干净的替代方案
如果你的项目不需要支持 IE，display: flow-root 是专为此类问题设计的现代解法：
- 同样触发 BFC，能让父容器包含浮动子元素、撑开高度
- 完全不干预溢出行为：绝对定位子元素照常溢出，阴影照常渲染，滚动条按需出现
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均原生支持
- 不改变盒模型类型，和 Flex/Grid 混用安全，不会引发额外层叠上下文
写法就是：display: flow-root 替掉 overflow: hidden，其他样式不动。
真正麻烦的从来不是加哪行 CSS
是加完之后没验证：下拉菜单还在不在？阴影有没有被切掉？滚动条还能不能拉？有没有某个 transform 动画突然被截断？这些细节往往要等用户反馈才暴露。别只盯着背景色回来了就合上开发者工具——塌陷修好了，但布局是否还如预期，得逐项确认。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
