在css中处理浮动导致的背景颜色无法显示，核心做法是给包含浮子元素的父容器触发bfc（块级格式化上下文）。通过设置 overflow: hidden、display: flow-root 或添加清除浮动的伪元素，可以让父容器正确计算高度并包裹子元素，从而让背景色完整呈现。
为什么浮动会让父容器高度塌陷？
浮动元素会脱离标准文档流，父容器在计算高度时忽略它们，导致高度变为0。使用 overflow: hidden 是最常见的修复手段，它强制父容器建立新的BFC，从而重新计算包含浮动子元素的高度。
.container {
overflow: hidden;
background-color: #f0f0f0;
}
.child {
float: left;
width: 100px;
height: 100px;
}预期结果：父容器 .container 的背景色将覆盖所有浮动子元素 .child 的区域，不再出现背景断裂或高度为0的情况。
立即学习“前端免费学习笔记（深入）”；
如何在不影响布局的情况下清除浮动？
如果 overflow: hidden 会导致内容裁剪，可以使用伪元素 ::after 进行清除。这种方法通过在父容器末尾插入一个不可见的块级元素并应用 clear: both，确保父容器包裹浮动子元素，同时保持内容正常溢出。
.clearfix::after {
content: "";
display: table;
clear: both;
}
.container {
background-color: #e0e0e0;
}
.child {
float: left;
width: 50%;
height: 150px;
}预期结果：父容器 .container 的背景色正确显示，且内部内容不会因 overflow 设置而被意外裁剪，适用于需要保留滚动或溢出的场景。
使用 display: flow-root 的现代解决方案
现代浏览器支持 display: flow-root，这是专门用于创建BFC的属性，无需担心 overflow 的副作用。它直接让父容器成为格式化上下文根，完美包裹浮动子元素，是推荐的首选方案。
.container {
display: flow-root;
background-color: #d0d0d0;
}
.child {
float: left;
width: 80px;
height: 80px;
}预期结果：父容器 .container 的背景色完全覆盖浮动子元素区域，代码简洁且无兼容性问题，适用于支持现代浏览器的项目。
