应避免将.clearfix::after无差别塞入base.css，因其强制所有clearfix容器渲染伪元素，白耗性能、干扰flex/grid布局、引发兼容冲突；推荐优先使用display:flow-root——单行创建BFC、无伪元素、主流浏览器全支持。
不应该写在公共基础样式表中。
为什么直接塞进 base.css 是个隐患
把 .clearfix::after 规则无差别放进全局基础样式，等于让所有带 clearfix 类的容器都强制渲染一个伪元素——哪怕它根本没浮动子元素，也无论它是不是 flex 或 grid 容器。
- 白耗渲染资源：每个
.clearfix都触发一次伪元素生成和布局计算，积少成多影响性能 - 干扰现代布局：在
display: flex容器上加.clearfix，Firefox 可能意外重排，Chrome 虽忽略但语义混乱 - 兼容性冲突：若同时用了
overflow: hidden或display: flow-root，再叠一层::after可能触发 IE 的 hasLayout 冲突
display: flow-root 比 .clearfix 更值得进公共库
真正该预设的是副作用更小、语义更明确的通用方案：display: flow-root 一行就能创建 BFC，不依赖伪元素，不污染 DOM，且主流浏览器（Chrome 64+ / Firefox 58+ / Safari 15.4+）已全支持。
- 它天然避免高度塌陷，无需判断“有没有浮动”
- 没有
*zoom: 1这类 IE 专属 hack，构建时不用条件编译 - 在 Vue/React 组件中动态挂载浮动内容时，不会出现“伪元素提前插入但无浮动可清”的首次渲染失效问题
如果项目必须兼容 IE8–9，.clearfix 应怎么组织
老项目不是不能用 .clearfix，而是得按需加载、分层隔离：
立即学习“前端免费学习笔记（深入）”；
- 把基础定义
.clearfix::after { content:""; display: table; clear: both; }放进基础层，但仅此而已 - IE8–9 补丁（如
*zoom: 1）单独抽到legacy.css，用构建工具开关控制是否注入 - 业务组件里优先写
display: flow-root；只有明确要兼容旧浏览器的模块，才显式加class="clearfix"
容易被忽略的关键点：清除浮动从来不是“有没有 float”，而是“float 是否导致父容器高度塌陷并影响后续布局”。很多所谓“需要 clearfix”的地方，其实只需要换掉浮动，或加个 flow-root ——那才是现代 CSS 该有的解法。
