父元素背景“消失”实为高度塌陷所致：浮动元素脱离文档流，父容器无法计算其高度，导致高度为0px、背景无处渲染；需通过触发BFC（如overflow:hidden、display:flow-root）或伪元素清除法恢复。

父元素背景“消失”其实是高度塌陷导致的

浮动元素本身不会直接禁用或覆盖父元素背景，但会导致父元素高度坍缩为 0px，背景自然无处可绘——这不是背景失效，而是容器没了高度。典型现象是：子元素明明左浮动排成一行，父

的背景色、边框、内边距全“看不见”，后续兄弟元素还往上跑。

为什么 float 会让父元素高度归零

因为 float: left 或 float: right 会让元素脱离标准文档流。父容器在计算自身高度时，只考虑仍在流内的内容（比如普通块级子元素、文本），而“看不见”浮动子元素的高度和位置。

• 即使两个 float: left 的子
  各占 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 确保伪元素参与高度计算

别再用

做补丁

这种空标签看似“撑开”了父容器，实则靠的是它自身的块级行为，而非 clear 属性本身。而且容易踩坑：


HTML Text Extract
从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。
下载
• 若该空
  被设为 display: none 或 visibility: hidden，依然塌陷
• IE6–7 下若同时触发 hasLayout（如加 zoom: 1），可能引发重绘异常
• 现代项目中属于冗余 DOM，语义不清，维护成本高

真正要理解的不是“怎么清浮动”，而是“浮动本就不该干布局的活”——导航栏、卡片网格、响应式列，优先用 display: flex 或 display: grid，它们天然不脱离文档流，父容器高度自动包含子项，背景、边框、间距全部按预期工作。