直接用 @mixin clearfix 而非复制粘贴 .clearfix 类，因其支持变量控制（如 $enable-ie8-support）、条件编译、动态 content 值及与断点/主题联动，且必须作用于浮动元素的直接父容器，现代项目优先使用 display: flow-root 或 Flex/Grid 布局替代。
直接用 @mixin clearfix 就行，别手写伪元素重复代码 —— Sass 的核心价值就是把这种模式封装成可复用、易维护的抽象。
为什么不能直接复制粘贴 CSS clearfix 类？
原生 CSS 的 .clearfix::after 写法在 Sass 里硬套会丢失变量控制力和语义表达能力。比如你无法动态开关 zoom 兼容层，也不能按需注入不同 content 值（某些老项目需要 content: "." 避免 Opera bug），更没法配合 @if 条件编译出轻量版。
- 硬写 CSS 类 = 放弃 Sass 的逻辑能力
- 每次改兼容性都要全局搜索替换
.clearfix - 无法与项目断点、主题色等变量联动
@mixin clearfix 的标准写法（含 IE8+ 兼容）
这是目前最稳妥、被 Bootstrap-sass 和大量生产项目验证过的写法：
@mixin clearfix {
&::before,
&::after {
display: table;
content: "";
}
&::after {
clear: both;
}
// IE8 zoom 触发 hasLayout，避免 margin collapse 异常
@if $enable-ie8-support {
zoom: 1;
}
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
&::before和&::after必须同时存在，单用::after在某些含 top margin 的子元素场景下会失效 -
display: table不是block—— 它能正确撑开父容器，且不干扰 inline 元素的 baseline 对齐 -
$enable-ie8-support是个布尔变量，方便在构建时一键剔除 zoom（现代项目设为false即可）
如何调用？别漏掉父容器选择器
混合器必须作用于浮动元素的直接父容器，否则无效：
.nav {
@include clearfix;
}
// 编译后生成：
.nav::before,
.nav::after {
display: table;
content: "";
}
.nav::after {
clear: both;
}
.nav {
zoom: 1;
}
- 错误写法：
.nav-item { @include clearfix; }—— 子项自己清不了父容器的塌陷 - 别用
@extend .clearfix：Sass 的@extend会把所有使用该 mixin 的选择器合并到一个规则里，破坏 BEM 或模块化命名隔离 - 如果父容器已用
display: flex或display: grid，根本不需要@include clearfix—— 浮动在这种上下文里本就不该存在
真正容易被忽略的是：清除浮动不是目的，而是「让父容器重新获得高度感知」的手段。现代项目优先用 display: flow-root 或直接换布局方式；只有当你必须保留 float（比如维护老系统、适配特定 CMS 模板）时，才该启用这个 mixin —— 并且务必确保它只出现在真正需要它的父级上。
