父元素背景色“消失”实为高度塌陷所致：浮动元素脱离文档流，父容器高度计算为0px，背景无处渲染；可用display: flow-root触发bfc彻底解决，现代浏览器兼容良好，无裁剪副作用。

父元素背景色“消失”，不是样式没生效，是它的 height 被浏览器算成了 0px —— 浮动元素脱离文档流后，父容器根本“看不见”它们，自然撑不开高度，背景也就无处可画。

float 怎么让父容器高度坍缩成 0

浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，父容器的 computed height 仍可能是 0，尤其当它内部没有其他非浮动内容（比如纯文本、普通块级元素）时。

常见现象包括：

• 父 <div> 设置了 <code>background-color，但页面上完全不显示
• 后续兄弟元素向上“塌陷”，紧贴在浮动区域上方
• 用开发者工具检查该父元素，height 和 offsetHeight 显示为 0 或极小值

overflow: hidden 为什么能“修好”背景色

它不是在“清除浮动”，而是触发了 BFC（块级格式化上下文）。BFC 容器的一个关键规则是：必须包含其内部的浮动子元素，并据此重新计算自身高度。

但要注意，这招有副作用：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• position: absolute 子元素超出父边界时会被裁剪（如下拉菜单、tooltip）
• box-shadow 若落在父容器外，也会被一并砍掉
• 如果父容器本该支持滚动（如内容超长），overflow: hidden 会把滚动条干掉
• 对 inline 元素无效，必须先确保父容器是 display: block 或 display: inline-block

display: flow-root 是更干净的现代解法

它是专为解决这类问题设计的 CSS 属性，同样触发 BFC，但不附带溢出裁剪行为——绝对定位子元素照常溢出，阴影照常渲染，滚动逻辑也不受影响。

兼容性已足够实用：

• Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
• IE 完全不支持，但 2026 年多数项目已无需考虑
• 和 display: flex 或 display: grid 混用安全，不会干扰对齐或层叠上下文

伪元素 clearfix 还值得用吗

在需要兼容 IE8–9 或无法改动 HTML 结构的老项目里，它仍是可靠选择。核心写法是：

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

但容易踩的坑有：

• 伪元素默认是 display: inline，不设 display: table 或 display: block，clear: both 就不生效
• 如果父容器本身用了 overflow: hidden，伪元素可能被裁剪，导致清除失效
• 别把 clear: both 直接加在父容器上——它只对自身生效，不作用于子元素

真正麻烦的从来不是选哪个方案，而是加完之后没检查：弹窗是否被裁、阴影是否变短、滚动是否失灵——这些细节往往上线才暴露。