浮动导致父容器高度塌陷因父容器忽略浮动子元素高度；解决方法依次为：overflow:hidden触发BFC、display:flow-root（现代首选）

、伪元素::after清除；clear:both须作用于浮动后的兄弟元素而非父容器；Flex/Grid布局下float失效，无需清除。

浮动元素导致父容器高度塌陷

当子元素使用 float: left 或 float: right 后，父容器默认会“看不见”这些浮动元素，计算高度时直接忽略它们，结果就是背景色、边框、内边距等视觉样式无法正常渲染——看起来像“背景消失了”，其实是容器高度变成了 0。

清除浮动的几种可靠方式

核心思路是让父容器重新感知浮动子元素的高度。以下方法按推荐顺序排列，兼顾兼容性与语义清晰度：

• 推荐：用 overflow: hidden（或 auto）触发 BFC —— 简单有效，IE6+ 支持，无额外 DOM 节点；但注意若子元素真有溢出（如绝对定位超出、阴影外扩），可能被意外裁剪
• 现代项目首选 display: flow-root —— 专为解决此问题设计，语义明确，不影响布局行为，Chrome 64+/Firefox 58+/Safari 15.4+ 支持；不支持旧浏览器时需回退
• 伪元素清除法（::after） —— 兼容性最好（IE8+），写法固定：

  parent::after { content: ""; display: table; clear: both; }

  ；注意必须设 content，且不能省略 display: table（仅 block 在某些 IE 下无效）

为什么 clear: both 单独加在父容器上没用

clear 只对**自身**起作用，它让元素避开前面的浮动元素，但不会“拉高”父容器。常见错误是给父容器加 clear: both，这毫无意义——父容器本身没浮动，也不存在需要避开的前序浮动流。

真正有效的 clear 必须加在浮动元素之后的**兄弟元素**上（比如一个空 ），或者用伪元素模拟这个“后续兄弟”的位置。

Flex/Grid 布局下根本不用清浮动

如果父容器已设 display: flex 或 display: grid，子元素的 float 会被完全忽略（规范定义），此时容器自然撑开，背景正常显示。但要注意：这不是“清浮动”，而是浮动失效了——如果你还依赖 float 实现文字环绕等效果，就得换思路。

所以遇到背景不显示，先确认是否误用了浮动；现代布局中，优先考虑用 flex 替代 float 来做横向排列，一劳永逸避开这个问题。