最推荐方案是.clearfix::after{content:"";display:table;clear:both}，因ie8+已全面支持::after，display:table比block更稳妥且避免margin折叠，clear:both为核心不可缺，现代项目无需::before或zoom:1。
直接用 .clearfix::after + display: table 就够了，不需要双伪元素、不用 zoom: 1，除非你明确要兼容 IE6/7。
为什么现代项目只写 ::after 就行
IE8+ 已全面支持 ::after，而 ::before 在 clearfix 场景中纯属冗余——它不参与清除逻辑，只增加渲染开销。Nicolas Gallagher 提出的 micro clearfix（2012）早已淘汰双伪元素写法，当前主流框架（Bootstrap 4+、Tailwind 默认配置）都只用单 ::after。
-
content: ""必须存在，否则伪元素不生成 -
display: table比block更稳妥：避免 margin 折叠、兼容老 Safari 对clear的解析差异 -
clear: both是核心，缺它就等于没清
display: flow-root 能替代 clearfix 吗
能，而且更干净——但得看浏览器支持范围。它通过触发 BFC 直接让父容器包含浮动子元素，一行 CSS 就解决，无伪元素、无 hack。
- Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 支持
display: flow-root - IE 完全不支持，
flow-root在 Vue/React 组件里若需 SSR 渲染，要注意服务端 CSS 不生效的边界情况 - 如果父容器本身用了
display: flex或grid，加clearfix或flow-root都无效——浮动在这些上下文中被忽略
哪些写法看起来“完整”实则多余
很多老教程还在抄带 ::before + zoom: 1 + visibility: hidden 的版本，这些在现代项目里反而埋雷。
-
*zoom: 1是 IE6/7 的 hasLayout hack，现在加了会触发某些 CSS-in-JS 库的属性过滤警告 -
visibility: hidden; height: 0; font-size: 0这套组合是为兼容极老 WebKit 设计的，当前所有主流引擎都不需要 -
content: "."比content: ""多一个字符，且可能意外触发字体 fallback 行为（比如某些中文字体把英文点渲染成方块）
真正要警惕的不是写错，而是不该用时硬套：只要父容器已经是 flex 或 grid，再塞 clearfix 就像给电动车装化油器——代码跑得动，但说明你没看清布局模型已经变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
