浮动元素脱离文档流导致父容器背景色无法撑开，根本解决方法是触发BFC：现代推荐display: flow-root（Chrome64+/Firefox58+/Safari15.4+），旧项目兼容IE可用.clearfix伪元素清除浮动。
浮动元素撑不开父容器背景色
这是最典型的视觉断层：父元素加了 background-color，但里面全是 float: left 的子元素，结果背景色只显示在父元素的“默认高度”上，像被剪掉了一截。根本原因是浮动元素脱离了文档流，父容器无法感知其高度。
解决思路不是硬设高度（破坏响应性），也不是乱加 overflow: hidden（可能裁剪弹窗、阴影等）。真正可控、语义清晰的做法是触发 BFC 并清除浮动影响。
-
overflow: hidden或overflow: auto能触发 BFC，但会意外隐藏溢出内容（比如下拉菜单、tooltip） -
display: flow-root是现代最优解：专为清除浮动设计，不干扰溢出行为，Chrome 64+ / Firefox 58+ / Safari 15.4+ 均支持 - 老项目需兼容 IE，才考虑
::after伪元素 +clear: both的.clearfix
display: flow-root 是什么，怎么用
display: flow-root 是 CSS 新增的显示类型，它让元素成为一个格式化上下文（BFC）根节点，同时保持内部正常流布局 —— 关键是它不改变盒模型表现，也不影响子元素定位方式。
用法极其简单，直接加在父容器上：
立即学习“前端免费学习笔记（深入）”；
section {
background-color: #f0f0f0;
display: flow-root; /* 就这一行 */
}对比传统 overflow: hidden：
如果子元素有 position: absolute 且超出父边界，overflow: hidden 会裁掉它；flow-root 不会。
- 不兼容 IE（全版本都不支持），Safari 15.4 之前也无效
- 不能和
display: inline混用（会退化为block） - 对 flex/grid 容器无效（它们本身已是独立格式化上下文）
手写 .clearfix 还有必要吗
有必要，但只在明确需要支持旧浏览器（如 IE11）时才用。现在大多数项目已可弃用。
经典 .clearfix 写法本质是：用伪元素生成一个“看不见但占位”的块级元素，并强制清浮动：
.clearfix::after {
content: "";
display: table;
clear: both;
}注意几个易错点：
- 必须写
content: ""，否则伪元素不渲染 -
display: table比block更稳妥：避免某些浏览器中clear对inline元素失效 - 不要用
display: block+height: 0，IE6/7 下可能不触发清除 - 如果父元素本身是
inline或inline-block，需额外加zoom: 1触发 IE hasLayout
为什么不用 float 本身来解决
有人试过给父元素也加 float: left，确实能“撑开”背景，但这只是把问题转移了：父容器自己又脱离文档流，导致它上面的兄弟元素会往上爬，布局彻底失控。
更糟的是，这种写法会让整个布局链式依赖浮动，维护成本飙升。一旦某个环节改用 flex，其他地方就得跟着大调。
- 浮动本意是图文环绕，不是布局工具
- CSS Grid 和 Flexbox 已成主流布局方案，浮动应仅用于特定排版场景（如文字绕图）
- 用
flow-root或clearfix是“修复副作用”，不是“延续旧模式”
真正容易被忽略的是：很多断层其实不是浮动引起的，而是子元素用了 position: absolute 或 display: inline-block 且没处理垂直对齐——这时候加 clearfix 没用，得查清楚高度塌陷的真实原因。
