现代项目基本不用 clearfix，因flexbox和grid天然不塌陷；仅需支持ie10及更早且无法改用新布局时才考虑，ie8+最简写法为两行伪元素清除，ie6/7需双伪元素加*zoom:1。
现代项目里基本不用写 clearfix —— Flexbox 和 Grid 天然不塌陷，加了也无效；只有明确要支持 IE10 及更早、且无法改用 Flex/Grid 的老项目，才需考虑它。
IE8+ 最简可靠的写法
别套网上那些带 ::before + zoom: 1 + content: "." 的“全兼容”模板，冗余且在某些 IE 下反而出错。实际只需两行：
.clearfix::after { content: ""; display: table; clear: both; }-
display: table触发 BFC，同时避免生成额外高度 - 不加
::before—— 它只为 IE6/7 的hasLayout服务，IE8+ 已不需要 - 不用
zoom: 1—— 现代 CSS 验证器会警告，且对清除浮动无实质作用
IE6/7 必须用的双伪元素写法
IE6/7 不支持 ::after，所谓“万能模板”在它们身上根本不会生效。如果真要支持：
- 必须同时写
.clearfix:before和.clearfix:after，单伪元素在 IE6/7 中不稳定 -
*zoom: 1是必需的（仅 IE6/7 识别），作用于父容器触发hasLayout -
display: table比display: block更可靠，避免伪元素不渲染
完整写法如下：
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
clearfix 加在哪？常见误用场景
写对了代码，加错地方照样白搭。典型错误包括：
- 给
display: flex容器加clearfix：完全无效，float在 Flex 容器中被忽略 - 给
display: grid容器加clearfix：同样无效，还可能破坏grid-template-areas - 在已设
overflow: hidden的父元素上重复加：多余，且后续加阴影或圆角时会被裁剪 - 把
clearfix当“万能修复”乱套：可能意外清掉你本想保留的浮动定位逻辑
IE6 下真正靠谱的替代方案
::after 在 IE6 根本不解析，所有基于伪元素的 clearfix 都是摆设。真要跑通 IE6：
- 用
overflow: hidden+zoom: 1（触发hasLayout） - 或直接在 HTML 末尾插入
<div style="clear:both"></div>—— 难看但 100% 可靠 - 别信“一个 class 解决所有”的说法，IE6 下
.clearfix类根本不会生效
真正麻烦的不是怎么写，而是判断要不要写——先确认是否真在维护 IE10 以下的老项目，再决定是否引入这套逻辑。否则，删掉它，改用 display: flex 或 display: grid 更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
