如何将旧版CSS clearfix升级为现代写法

现代项目应删除clearfix而非升级它，因其本不该存在；只需移除float并用display: flow-root替代，仅在邮件模板、老系统兼容或第三方组件嵌入时才需最简clearfix。

现代项目里该删掉clearfix，而不是升级它

绝大多数所谓“升级”需求，本质是误判了问题根源——clearfix不是过时了，而是不该存在。只要父容器没用float，就根本不需要它。真正要做的不是改写.clearfix::after，而是把float: left和float: right从HTML结构里删干净。

display: flow-root 是最轻量的替代方案

如果只是想解决浮动导致的父容器塌陷，且无需支持 IE11 及更早版本，直接换用display: flow-root即可：

1. flow-root创建 BFC，天然包裹浮动子项，不裁剪溢出内容，也不影响margin合并以外的渲染行为
2. Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全部支持；IE 完全不支持，但 IE11 已属维护末期
3. 写法极简：.container { display: flow-root; }，不用加任何类名，也不用伪元素
4. 注意：flow-root会重置相邻块级元素的margin折叠，若页面依赖外边距合并，需额外加margin-top或margin-bottom微调

必须保留clearfix的少数真实场景

只有三类情况才真需要clearfix，且必须用最简写法：

1. 邮件模板开发：Outlook Desktop 等客户端只认float + clearfix，flex/grid基本不可用
2. 老系统维护：明确要求兼容 IE10 或更低版本，且无法重构布局逻辑
3. 第三方组件嵌入：你无法修改其 HTML 结构，但需确保父容器高度正确

此时只需这一段（IE8+ 安全）：

.clearfix::after {content: "";display: table;clear: both;}

别加::before，别写zoom: 1，别套“万能模板”——多余代码在旧 IE 下反而可能触发渲染异常。

最容易被忽略的陷阱：clearfix加在了错误层级

很多团队把clearfix加在每个列表项上，比如<div class="item clearfix">，这是典型误用：

1. 应该加在列表容器上：<div class="list clearfix"><div class="item"></div></div>
2. 每个::after都触发一次重排，长列表下性能明显下降
3. DOM 和样式层冗余，可读性差；漏加一个，整行错位，排查困难
4. 更隐蔽的问题：如果父容器本身已有overflow: hidden或transform，它已创建 BFC，再叠clearfix可能导致高度计算异常

真正麻烦的从来不是怎么写clearfix，而是判断它是否真的该出现在这个项目里——先确认是否还在维护 IE10 以下的老系统，再决定要不要留这行代码。