背景色“塌陷”是因为浮动元素脱离文档流导致父容器高度坍缩为0；解决核心是清除浮动，推荐伪元素法：.clearfix::after{content:"";display:table;clear:both}。
浮动元素会脱离文档流，导致父容器无法正确计算高度，背景色自然就“塌陷”了——看起来像没显示，其实是父元素高度变成0了。解决核心是让父容器重新“感知”到浮动子元素的高度，也就是清除浮动。
为什么背景色不见了？
因为浮动元素不占文档流空间，父容器在渲染时“以为”里面空空如也，高度坍缩为0，背景色也就没地方可画。这不是背景色失效，而是容器没了高度。
推荐：用伪元素清除浮动（现代标准做法）
给父容器添加一个通用、干净的清除方式：
Money Knowledge
下载
金钱与财富知识助手。提供关于金钱的基本概念、理财知识、投资原则、财富思维等方面的内容。适用于：1) 了解金钱的基本知识；2) 学习理财和投资原则；3) 培养财富思维；4) 了解经济学基础概念。
.clearfix::after {
content: "";
display: table;
clear: both;
}
然后在HTML中给父元素加上这个类：
<div class="container clearfix"> <div class="float-left">左浮动</div> <div class="float-right">右浮动</div> </div>
✅ 优点：语义清晰、无需额外HTML标签、兼容性好（IE8+）。
其他可用方法（按场景选择）
- overflow: hidden（或 auto）：给父容器设置 overflow: hidden 可强制触发BFC，使容器包含浮动。但注意可能意外裁剪溢出内容（比如下拉菜单、阴影）。
- display: flow-root：CSS新属性，专门用来创建BFC且无副作用，一行代码解决：display: flow-root。现代浏览器支持良好（Chrome 64+/Firefox 62+/Edge 79+），适合新项目。
-
额外空标签清除（不推荐）：在浮动元素末尾加
<div style="clear:both"></div>。有效但污染HTML结构，已逐步淘汰。
小提醒：别忘了重置浮动本身
如果子元素用了 float: left 或 float: right，记得它们之后的内容（比如文字、按钮）可能也会错位。清除浮动不只是为了背景色，更是为了整体布局可控。必要时给后续元素也加 clear: both 或用Flex/Grid替代老式浮动布局。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
