父容器背景“缺失”是因浮动导致高度坍缩为0px；根本原因是浮动元素脱离文档流，父容器无法感知其尺寸；首选display: flow-root触发BFC修复，次选伪元素clearfix，慎用overflow:hidden。
浮动元素导致父容器背景“缺失”，根本不是 background 没生效，而是父容器的 height 被浏览器算成了 0px——背景无处可画。
float 本质是排版指令，不是布局工具
浏览器按 CSS 规范处理 float: left 或 float: right 时，会把该元素从普通文档流中移除。它不再参与父容器的高度计算，也不占位后续块级元素的位置。但文字仍能绕着它排，因为它还在包含块内、受 margin/padding 约束，并继续影响行框（inline formatting context）。
常见表现包括：
- 父容器
computed height显示为0px，background-color和background-image全部不可见 - 后续兄弟元素（如页脚）向上塌陷，视觉上与浮动区域重叠
- 开发者工具里看到父容器的
offsetHeight极小或为 0
为什么 clear: both 加在父容器上没用
clear 属性只对**自身是块级元素且紧跟在浮动元素之后的兄弟节点**起作用。给父容器加 clear: both 完全无效——它不改变父容器是否包含子浮动元素，也不触发任何高度重算逻辑。
立即学习“前端免费学习笔记（深入）”；
真正起效的是让父容器形成新的块级格式化上下文（BFC），强制它“看见”并包含浮动子项。触发 BFC 的方式有几种，但效果和副作用差异很大：
-
display: flow-root：专为此设计，触发 BFC 且无裁剪、无 margin 折叠干扰 -
overflow: hidden：兼容性好，但会裁剪position: absolute子元素、砍掉box-shadow、干掉滚动条 -
::after伪元素 +clear: both：需三要素齐全——content: ""、display: table（比block更稳）、clear: both
display: flow-root 是首选，但要注意前提
它不是“万能补丁”，必须满足几个硬条件才能生效：
- 必须加在父容器上，且该容器本身得是块级（不能是
display: inline或inline-block；若原本是，先加display: block） - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 兼容范围：Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；IE 全不支持
- 如果父容器被
height: 0、max-height: 0或overflow: hidden锁死，flow-root也撑不开高度
修复后背景还是不显示？别急着改 float
即使你加了 display: flow-root 或 clearfix，背景仍可能“看不见”，问题往往已不在浮动本身：
- 图片加载延迟或字体未就绪，导致内容高度还没稳定，父容器暂时撑不开
-
margin-collapse异常压缩了可用高度（尤其伪元素用display: block时） - 父容器缺少明确宽高锚点：
background-size: cover在 0 高度下会异常缩放，background-attachment: fixed可能失效 - 浮动仍在影响周围：比如
z-index层级错乱、position: absolute的包含块回溯到 body
务必用开发者工具确认父容器的 computed height 和 offsetHeight 是否已非零——否则所有清除手段都只是表面功夫。
