.clearfix类是解决浮动布局维护难的最优解——通过伪元素生成无侵入清除节点，兼容ie8+、不裁剪溢出内容、语义清晰；推荐写法为.clearfix::after{content:"";display:table;clear:both}。
浮动布局维护难，核心在于清除浮动的逻辑散落在各处，容易遗漏或重复。用 .clearfix 类统一收口是最直接有效的解法——把清除逻辑抽成可复用的样式规则，一处定义，多处调用，避免在每个浮动容器上手写 overflow: hidden 或额外空标签。
为什么 clearfix 比 overflow:hidden 更可靠
overflow: hidden 虽能触发 BFC 清除浮动，但会意外裁剪溢出内容（比如下拉菜单、阴影、定位元素），且对 transform 或 will-change 等属性有隐式影响。而 .clearfix 通过伪元素生成无侵入的清除节点，不干扰盒模型和渲染行为。
- 兼容所有主流浏览器（包括 IE8+）
- 不影响子元素的定位、溢出、动画等表现
- 语义清晰：类名即意图，团队协作时一目了然
推荐的 clearfix 写法（兼顾现代与兼容）
不用复杂的 :before + :after 双伪元素方案，单用 :after 就够用：
content: "";
display: table;
clear: both;
}
关键点：display: table 比 block 更稳妥，避免 IE6/7 下的 margin 折叠问题；clear: both 确保撑开父容器高度。
立即学习“前端免费学习笔记（深入）”；
什么时候加 clearfix？只加在“需要包裹浮动子项”的父容器上
不是所有容器都要加。典型场景有：
- 多列浮动布局的外层 wrapper（如导航栏、商品列表行）
- 内部含
float: left/right的卡片、侧边栏组合 - 第三方组件中无法修改 HTML 结构，但需确保高度正确时
避免滥用：Flex 或 Grid 布局已原生解决高度塌陷，无需 clearfix；纯文本流容器也不需要。
进阶：配合 CSS 自定义属性动态控制
如果项目已用 CSS 变量，可让 clearfix 更灵活：
.clearfix {--clear: both;
}
.clearfix::after {
content: "";
display: table;
clear: var(--clear);
}
这样后续扩展左清、右清等变体时，只需覆盖变量，无需新增类名。
