应优先用 display: flow-root 替代 clearfix，它创建 bfc 解决浮动塌陷且无副作用；仅 ie11 及更老浏览器需回退 clearfix。
直接用 display: flow-root 替代大多数 clearfix 场景，能彻底绕过清除逻辑，且无副作用；只有 IE11 及更老浏览器才需要退回到 clearfix。
什么时候根本不需要 clearfix
只要父容器没浮动子项，就不用加。常见误用场景包括：
- Flex 或 Grid 容器内部的子元素写了
float—— 此时float被忽略，clear无效，加 clearfix 反而干扰布局 - 纯文本流内容（如
<p></p>、<div> 未设 float）的父容器，高度天然撑开 <li>使用了 <code>display: grid或display: flex的容器，子项自动参与文档流，不存在塌陷问题
用 flow-root 替代 clearfix 的实际写法
flow-root 是现代标准中最轻量的解法：它创建 BFC，包裹浮动子项，不裁剪溢出，也不影响 margin 合并以外的渲染行为。
只需一行 CSS：
.container {
display: flow-root;
}
注意两点：
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 均支持；IE 完全不支持
- 它会重置相邻块级元素的 margin 折叠，如果页面依赖外边距合并，需额外调整
仍需保留 clearfix 的少数情况
不是所有项目都能立刻切换布局方式。以下场景仍要靠 clearfix：
- 邮件模板开发：多数邮件客户端（如 Outlook Desktop）只认 float + clearfix，Flex/Grid 几乎不可用
- 老系统维护：IE11 或更低版本必须兼容时，
flow-root不可用，只能用.clearfix::after - 第三方组件嵌入：无法修改其 HTML 结构，但需确保父容器高度正确，此时 clearfix 是唯一可控手段
此时务必用最简写法：.clearfix::after { content: ""; display: table; clear: both; }，别加 zoom: 1 或双伪元素——IE8+ 已足够，多余代码反而增加维护负担。
避免在循环中重复应用 clearfix
比如商品列表每项都写 <div class="item clearfix">，其实是设计错误。应该把 clearfix 加在列表容器上，而不是每个 item 上。
<p>正确结构是：</p>
<pre class="brush:php;toolbar:false;"><div class="product-list clearfix">
<div class="product"></div>
<div class="product"></div>
</div></pre>
<p>否则：</p>
<ul>
<li>每个 <code>::after 都触发一次重排，长列表性能明显下降
真正容易被忽略的是：很多团队把 clearfix 当成“安全补丁”到处贴，却没意识到它暴露的是布局模型陈旧——该重构的不是类名，是 float 本身。
