父容器 background-color 不显示是因为高度为0，根源在于浮动元素脱离文档流导致父容器高度塌陷；display: flow-root 是最干净的修复方式，可触发bfc包含浮动子元素且无副作用，兼容现代浏览器但不支持ie。
父容器 background-color 看不见，其实是 height=0
不是样式没生效，是父容器计算出的高度为 0px。浮动元素（float: left 或 float: right）脱离文档流后，父容器在布局阶段“看不见”它们，自然无法将其高度纳入自身 height 计算。用开发者工具检查该父元素的 Computed > height，大概率显示 0 或极小值——这就是背景色消失的根源。
常见现象包括：
- 父
<div> 设置了 <code>background-color，但页面上完全不显示 - 后续兄弟元素紧贴在浮动区域上方，像被“吸上去”一样
-
padding和border仍存在，但中间区域无内容、无高度、无背景
display: flow-root 是最干净的修复方式
它专为解决此类问题设计：触发 BFC（块级格式化上下文），强制父容器包含浮动子元素，同时不附带副作用。相比 overflow: hidden，它不会裁剪 position: absolute 子元素、不影响 box-shadow 渲染、也不干扰滚动逻辑。
只需一行 CSS：
.container {
display: flow-root;
background-color: #e0e0e0;
}
注意兼容性：
- Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 均支持
- IE 完全不支持，如需兼容 IE11 及更早版本，不能单独依赖此方案
- 若项目已使用 Autoprefixer，无需手动加前缀
clearfix 伪元素法仍是最稳妥的兼容方案
给父容器加 class="clearfix"，配合标准伪元素定义，能覆盖 IE8+ 所有主流环境。关键在于伪元素必须参与高度计算，display: table 比 display: block 更可靠——它避免某些场景下的外边距折叠问题，且在老浏览器中兼容性更稳。
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
容易踩的坑：
- 漏掉
content: ""—— 伪元素不会生成，clear失效 - 写成
display: inline——clear不起作用 - 在某些 CSS 重置库（如 normalize.css）环境下，
display默认值可能被改写，建议显式声明display: table - 不要把
clear: both直接加在父容器上——它必须作用于浮动元素之后的“新行”，伪元素正是为此模拟这一位置
为什么 overflow: hidden 要慎用
它确实能快速触发 BFC、让背景“回来”，但副作用真实且常见：
-
position: absolute子元素超出父边界时会被硬裁剪（下拉菜单、tooltip、气泡提示直接消失） -
box-shadow若落在父容器外，也会被一并砍掉 - 父容器本应支持滚动（如长列表、日志面板），
overflow: hidden会彻底禁用滚动条 - 对
inline元素无效，必须先确保父容器是display: block或display: inline-block
如果只是临时调试或确认是否为塌陷问题，overflow: auto 比 hidden 更安全——至少滚动条会在需要时出现；但生产环境仍建议优先用 display: flow-root 或 clearfix。
真正容易被忽略的是：浮动本身已不适合现代布局。即使背景修好了，float 仍可能导致 margin-collapse 异常、z-index 层级错乱、transform 定位偏移等问题。修完背景，务必用开发者工具再扫一眼整体渲染是否如预期。
