现代布局中clearfix基本不用了，因Flexbox和Grid天然避免浮动塌陷；仅在需兼容IE10及更早且无法用Flex的老项目中才需使用，最简实现为.clearfix::after{content:"";display:table;clear:both}。
clearfix 为什么现在基本不用了
现代布局中，clearfix 已不是首选方案——Flexbox 和 Grid 天然不触发浮动塌陷，用 display: flex 或 display: grid 替代父容器包裹浮动子元素，问题直接消失。只有在仍需支持 IE10 及更早版本、且无法改用 Flex 的老项目里，才需要它。
最简可靠的 clearfix 实现（IE8+）
别用网上那些带 :before + :after + content: "" + zoom: 1 的“兼容全版本”写法，冗余且在某些 IE 下反而出错。实际只需两行：
.clearfix::after {
content: "";
display: table;
clear: both;
}
说明：
• display: table 触发 BFC，同时避免生成空行高
• 不加 ::before —— 它只解决旧版 IE 的 hasLayout 问题，而 ::after 在 IE8+ 已足够
• 不用 zoom: 1 —— 现代 CSS 验证器会警告，且对清除浮动无实质作用
用错 clearfix 的典型现象
常见错误不是写法不对，而是用错了地方：
- 给 Flex 容器加
clearfix：完全无效，display: flex下子项浮动被忽略 - 给 Grid 容器加
clearfix：同样无效，且可能破坏grid-template-areas布局 - 在已用
overflow: hidden的父元素上重复加：多余，且若后续要加阴影或圆角，overflow: hidden会裁剪掉 - 把
clearfix当成“万能修复”乱套在各种容器上：可能意外清掉你本想保留的浮动定位逻辑
真要兼容 IE6–7？别用 clearfix
那两个版本连 ::after 都不支持，所谓“万能模板”实为自欺。如果必须支持：
- 用
overflow: hidden（配合zoom: 1触发 hasLayout） - 或在 HTML 中插入
<div style="clear:both"></div>—— 难看但 100% 可靠 - 别信“一个 class 解决所有”的说法，IE6 下
clearfix类根本不会生效
真正难处理的从来不是代码怎么写，而是要不要为早已淘汰的浏览器留后门——这个决策点，比选哪个 clearfix 写法重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
