用伪元素清除浮动：在父容器添加.container::after{content:””;display:table;clear:both}，三者缺一不可，可使背景色正常显示且无副作用。
浮动元素导致背景色塌陷怎么办
直接给父容器设 background-color，但背景只覆盖到浮动子元素的高度（甚至为0），不是全宽全高——这是浮动脱离文档流后，父容器高度坍缩的典型表现。不解决清除问题，背景色永远填不满。
常见错误现象：div 包着几个 Float: left 的 section，父级 background-color 看不见或只有一条细线；用 overflow: hidden 强制撑开虽有效，但可能意外裁剪 position: absolute 子元素或阴影。
- 优先用伪元素清除：在父容器末尾插入
::after，设置clear: both，不影响布局逻辑 - 必须同时设置
content: ""和display: table（或block），否则伪元素不占空间，清除无效 - 避免用
display: flex或display: grid替代——这会彻底改变布局模型，不是“浮动下的解决方案”，而是绕开问题
伪元素清除浮动的标准写法
不是所有 ::after 都能清浮动，关键在三个属性缺一不可：内容、显示类型、清除行为。漏掉任意一个，背景色照样塌。
正确写法示例：
立即学习“前端免费学习笔记（深入）”；
.container::after { content: ""; display: table; clear: both; }-
content: ""是强制项，空字符串也不可省略，否则伪元素不生成 -
display: table比block更稳妥：它天然形成 BFC，且不会因 margin 合并干扰父容器高度计算 - 不需要
height: 0或visibility: hidden——content: ""+display: table已足够隐形且生效
为什么不用 clear: both 单独加在兄弟元素上
有人把 clear: both 写在浮动元素后面一个空 div 上，也能撑开背景，但这是过时且脆弱的做法。
- 多写一个无语义的
<div></div>增加 HTML 负担，违背结构与样式的分离原则 - 若后续删掉那个空
div（比如 CMS 自动过滤空标签），背景立刻塌陷，问题复现难定位 - 响应式场景下，浮动可能被
@media移除，但clear兄弟元素还在，反而造成意外空白
全屏背景色 ≠ 全视口高度，别混淆 height: 100vh
清除浮动只是让父容器正确包裹子元素，从而让 background-color 显示完整；但它不会让容器自动占满整个屏幕高度。如果目标是“视觉上全屏背景”，得另加条件。
- 若子内容不足一屏，又想背景铺满视口：需同时设
min-height: 100vh，不能只靠清除浮动 -
100vh在移动端 safari 有兼容问题（地址栏显隐影响实际值），更稳的是min-height: 100%+ 父级（如html,body）也设height: 100% - 清除浮动和设置最小高度是两件事：前者解决“背景随内容塌陷”，后者解决“背景不够高”，别指望一个
::after干两份活
浮动布局本身已边缘化，但老项目、邮件模板、特定 CMS 输出仍大量存在。伪元素清除是目前最轻量、无副作用、可预测的解法——只要记住三要素：content、display、clear，一个都不能少。