浮动元素导致父容器高度塌陷，因其脱离文档流使父容器无法感知其高度；clearfix通过伪元素触发BFC清除浮动，display: flow-root是现代更优替代方案。
浮动元素为什么会让父容器高度塌陷
当子元素设置了 float: left 或 float: right，它会脱离普通文档流，父容器无法感知其高度，导致父容器高度变成 0 —— 这不是“重叠”，而是父容器“看不见”子元素了，后续兄弟元素自然会上移覆盖其位置。
常见现象：父容器背景色没显示、边框不包裹内容、后续 div 跑到浮动元素旁边甚至底下。
- 仅对设置了
float的子元素生效；position: absolute或display: inline-block不触发该问题 - Flex/Grid 布局下无需处理，但老项目或兼容 IE8–9 时仍常见浮动布局
- 用
overflow: hidden临时撑开父容器虽有效，但可能意外裁剪阴影、下拉菜单等溢出内容
clearfix 的标准写法及各浏览器兼容要点
真正的 clearfix 是通过伪元素在父容器末尾插入一个清除浮动的块，既不影响结构，又不破坏溢出行为。最稳妥的写法需同时覆盖 IE6–8 和现代浏览器：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
::before必须存在，否则 IE6–7 下zoom: 1触发 hasLayout 失效（虽然现代项目可省略，但若需支持 IE7，建议保留） - 不要用
display: block替代display: table，后者能正确触发 BFC 且兼容所有浮动清除场景 - 若项目已用 Autoprefixer，无需手动加
-webkit-等前缀；但::before/::after在 IE8 需写成:before/:after
什么时候不该用 clearfix
不是所有浮动都需要清除。盲目加 class="clearfix" 可能掩盖布局逻辑问题，甚至引发新问题：
- 父容器本身是浮动元素（如两栏并排），它的父级才需要清除，它自己不需要
- 浮动元素后面紧跟的是
clear: both的兄弟元素，此时父容器无需 clearfix —— 清除动作已在兄弟元素上完成 - 使用
display: flow-root（Chrome 64+/Firefox 58+）可替代 clearfix，它直接让容器生成 BFC，更语义化且无伪元素开销 - Vue/React 中动态渲染浮动子项时，若父组件未设固定高度，又没用 clearfix 或 BFC 触发方式，容易出现布局闪动
现代替代方案：display: flow-root vs flex
如果目标浏览器支持，优先用更轻量、意图更明确的方式：
-
display: flow-root是专为解决此问题设计的值，效果等同于 BFC + 无副作用，一行 CSS 即可：.container { display: flow-root; } - 改用
display: flex也能自然避免塌陷，但会改变子项排列逻辑（默认flex-direction: row，且子项float失效）—— 这不是“修复浮动”，而是重构布局 - 注意：Safari 15.4 之前对
flow-root的某些组合（如配合align-items: stretch）有渲染 bug，上线前需实测
真正难处理的，往往是那些浮动嵌套三层以上、同时混用 position 和 transform 的遗留代码 —— 此时 clearfix 反而比猜 flow-root 是否生效更可控。
