最简可靠写法是.clearfix::after{content:"";display:table}，因display:table天然创建bfc并撑高，clear:both可省略；必须作用于直接包裹浮动子项的父容器，且content:""不可省略或写错。
现代项目里，最简可靠的 .clearfix::after 写法就两行，且必须用 display: table，不是 block。
为什么只写 ::after 就够了？
IE8+ 已完全支持 ::after，::before 在清除浮动中纯属冗余——它只为 IE6/7 的 margin collapse 修复服务，而这类浏览器早已退出主流维护。硬加 ::before 不仅多写一行，还会在某些含顶部外边距的子元素场景下引发意外撑高。
-
content: ""必须写，且不能是空格、;或省略：否则伪元素不生成，整个清除逻辑失效 -
display: table是关键：它创建 BFC，同时不继承line-height，比block更稳；inline-block绝对不用，受空白符干扰 -
clear: both必须作用于块级框，若父容器是display: inline或inline-flex，这行无效
.clearfix 加在哪才真正起作用？
必须加在「直接包裹浮动子项」的父容器上，错一层就白搭。比如 HTML 是 <div class="wrap"><div class="grid"><div style="float:left"></div></div></div>，那 .clearfix 得加在 .grid 上，不是 .wrap。
- 给
display: flex或display: grid容器加.clearfix：完全无效，浮动在这些上下文中被忽略 - 父容器已设
overflow: hidden或display: flow-root：再加.clearfix属于冗余，还可能裁剪position: absolute子元素 - Vue/React 模板中，别挂在组件根节点（如
<div class="card">），而应明确加在那个包裹 <code>v-for浮动项的内部<div> <h3>要不要支持 IE8？看构建时变量还是硬编码</h3> <p>如果项目仍需兼容 IE8，用 Sass 时优先走 <code>@mixin clearfix+$enable-ie8-support变量控制；纯 CSS 项目则只需单加zoom: 1到类上，别碰*zoom（CSS 验证器会警告，且对清除无实质作用）。- Sass 用户：直接调用
@include clearfix，构建时设$enable-ie8-support: false即可一键剔除zoom - 纯 CSS 用户：只在真需支持 IE8 的场景下追加
.clearfix { zoom: 1; }，其他情况删掉 - 千万别把
zoom: 1和display: table混在一起当“保险”——zoom在现代浏览器中无意义，反而增加解析负担
真正容易被忽略的不是代码长短，而是判断「是否真需要 clearfix」：先确认布局中是否混用浮动与传统文档流（比如图文环绕、遗留栅格），否则直接换
display: flow-root或重构为 Flex/Grid —— 写对了代码，但用错了场景，和没写没区别。 - Sass 用户：直接调用
