浮动元素导致父容器高度塌陷，背景色消失；根本原因是浮动脱离文档流，父容器无法感知子元素高度；推荐用 display: flow-root 触发 BFC 或改用 Flex/Grid 布局。
浮动元素撑不开父容器，背景色消失
这是最典型的“背景色不显示”现象：父容器设置了 background-color，但内部全是 float: left 或 float: right 的子元素，结果父容器高度塌陷为 0，背景色自然看不见。
根本原因不是 CSS 写错了，而是浮动元素脱离了文档流，父容器无法感知其高度。浏览器渲染时，父容器按“空盒子”处理，画背景色的区域就是一条线（高度为 0）。
- 常见于导航栏、图文混排、卡片网格等布局中突然“背景没了”
- 用开发者工具检查父容器，会发现
offsetHeight或 computed height 确实是 0 或远小于预期 - 不要试图给父容器硬写
height—— 响应式下会立刻出问题
clear: both 不是万能解，现代项目优先用 BFC
clear: both 确实能“堵住”浮动往下漏，但它只是在浮动元素后面强行插入一个清除元素，本身不解决父容器包裹问题。真正让父容器重新包含浮动子元素的，是触发 BFC（块级格式化上下文）。
- 推荐方式：给父容器加
overflow: hidden（兼容 IE8+）、overflow: auto或display: flow-root（现代标准，无副作用） -
display: flow-root是目前最干净的方案 —— 它专门为此设计，不影响溢出行为，也不触发不必要的滚动条 - 避免用
float自身清除（比如父容器也设float），这会让整个布局层级更难维护
Flex/Grid 布局下根本不用清浮动
如果你正在写新项目，或者可以重构旧代码，直接放弃 float 做布局。Flex 和 Grid 天然不脱离文档流，父容器自动包裹子项，background-color 从一开始就不会丢。
立即学习“前端免费学习笔记（深入）”；
- 把
float: left改成display: flex+flex-wrap: wrap，几行就搞定多列流式布局 - Grid 更适合二维布局（如相册、仪表盘），写
display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))就能响应式铺满 - 注意：老项目里混用 float 和 flex 可能引发意外交互 —— 比如 float 元素在 flex 容器里仍会脱离流，别这么干
伪元素清除法（clearfix）还在用？小心 margin 折叠和 display 干扰
经典 .clearfix::after 方案确实有效，但细节容易翻车。很多人复制粘贴一段代码就完事，却忽略了它对盒模型的影响。
- 必须确保伪元素是
display: table或display: block，display: inline会导致clear失效 - 如果父容器有
margin-bottom，而伪元素是display: block，可能触发外边距折叠，让底部间距变小 - 某些 CSS 重置库（如 normalize.css）会改全局
display默认值，导致伪元素意外变成inline—— 建议显式写死display: table - 示例安全写法：
.clearfix::after { content: ""; display: table; clear: both; }
