浮动导致父容器高度塌陷因父容器忽略浮动子元素高度；解决方法依次为：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 来做横向排列，一劳永逸避开这个问题。
