父元素背景“消失”实为高度塌陷所致：浮动元素脱离文档流，父容器无法计算其高度，导致高度为0px、背景无处渲染；需通过触发BFC（如overflow:hidden、display:flow-root）或伪元素清除法恢复。
父元素背景“消失”其实是高度塌陷导致的
浮动元素本身不会直接禁用或覆盖父元素背景，但会导致父元素高度坍缩为 0px，背景自然无处可绘——这不是背景失效，而是容器没了高度。典型现象是：子元素明明左浮动排成一行，父 <div> 的背景色、边框、内边距全“看不见”，后续兄弟元素还往上跑。
为什么 float 会让父元素高度归零
因为 float: left 或 float: right 会让元素脱离标准文档流。父容器在计算自身高度时，只考虑仍在流内的内容（比如普通块级子元素、文本），而“看不见”浮动子元素的高度和位置。
- 即使两个
float: left的子<div>各占 200px 高，父容器 computed height 仍可能是0px - 父容器的
padding和border可能还在，但中间区域高度为 0，背景无法填充 - 用浏览器开发者工具检查
Computed > height，常看到0px—— 这就是根源
清除浮动才能让背景“回来”
恢复背景的前提是让父容器重新包含浮动子元素，也就是解决高度塌陷。关键不是“加 clear”，而是触发父容器形成新的块级格式化上下文（BFC）或插入一个参与高度计算的清除元素。
-
overflow: hidden最简：给父容器加此样式可强制触发 BFC，背景立即显示；但注意可能意外裁剪position: absolute子元素或下拉菜单 -
display: flow-root更精准：现代标准属性，专为创建无副作用 BFC 设计，一行代码解决，Chrome 64+/Firefox 62+ 支持良好 -
伪元素清除法（推荐兼容方案）：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加class="clearfix"。它不污染 HTML，且display: table确保伪元素参与高度计算
别再用 <div style="clear: both"></div> 做补丁
这种空标签看似“撑开”了父容器，实则靠的是它自身的块级行为，而非 clear 属性本身。而且容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 若该空
<div>被设为display: none或visibility: hidden，依然塌陷 - IE6–7 下若同时触发
hasLayout（如加zoom: 1），可能引发重绘异常 - 现代项目中属于冗余 DOM，语义不清，维护成本高
真正要理解的不是“怎么清浮动”，而是“浮动本就不该干布局的活”——导航栏、卡片网格、响应式列，优先用 display: flex 或 display: grid，它们天然不脱离文档流，父容器高度自动包含子项，背景、边框、间距全部按预期工作。
