overflow: hidden能修复背景色是因触发bfc使父容器包含浮动子元素并撑开高度；但会裁剪绝对定位内容、阴影及滚动条，现代推荐用display: flow-root替代。
背景颜色不显示，不是样式没生效，是父容器高度塌陷成了 0，背景没地方画 —— overflow: hidden 能修，但得明白它为什么管用、以及在哪会翻车。
overflow: hidden 为什么能“修好”背景色
浮动元素脱离文档流，父容器计算高度时直接忽略它们，结果 height 变成 0，background-color 自然不可见。而 overflow: hidden 会强制触发 BFC（块级格式化上下文），BFC 的一个关键特性就是：容器会包含内部的浮动子元素，并据此重新计算自身高度。
这不是“清除浮动”，而是让父容器“看见”浮动元素，从而撑开高度、给背景留出渲染空间。
- 只要父容器没设固定
height，且子元素全是float: left或float: right，就极可能塌陷 -
overflow: hidden在 IE8+ 全平台可用，是兼容性最广的 BFC 触发方式之一 - 它不依赖额外 DOM 节点或伪元素，一行 CSS 就能见效
overflow: hidden 容易被忽略的副作用
它确实快，但不是无感的“开关”。很多视觉异常其实都源于这个声明被粗暴加在不该加的地方。
- 如果子元素用了
position: absolute且超出父容器边界（如下拉菜单、tooltip），会被直接裁剪，而不是溢出显示 - 配合
border-radius时，圆角生效，但若同时有box-shadow，阴影也会被一并砍掉 - 父容器本身需要滚动（比如内容超长），
overflow: hidden会把滚动条干掉，此时该换overflow: auto - 在 Flex/Grid 容器上误加
overflow: hidden，可能干扰align-items或justify-content的对齐行为
比 overflow: hidden 更干净的现代替代方案
如果你的项目不需要支持 IE，display: flow-root 是专为此类问题设计的，语义明确、零副作用。
-
display: flow-root同样触发 BFC，但不会影响溢出行为 —— 绝对定位子元素照常溢出，阴影照常渲染 - Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均已原生支持
- 它不改变盒模型类型（不像
float或position: absolute那样会让父容器脱离文档流） - 和 Flex/Grid 混用安全，不会引发层叠上下文或对齐冲突
真正麻烦的从来不是加一行 overflow: hidden，而是加完之后没检查子元素是否被意外裁剪、阴影是否消失、滚动是否失效——这些细节往往要等上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
