现代项目中只需用单::after伪元素实现clearfix，因IE8+已全面支持且::before冗余；标准Sass写法为@mixin clearfix() { &::after { content: ""; display: table; clear: both; }}，调用时不可省略括号。
现代项目里，@mixin clearfix() 不用写双伪元素、不用管 IE8、也不该带 *zoom: 1 —— 那些是历史包袱，现在直接用单 ::after 就够了。
为什么只写 ::after 就行？
IE8+ 全面支持 ::after，而 ::before 在 clearfix 场景中不参与清除逻辑，纯属冗余：它既不触发 BFC，也不影响 clear 行为，反而增加渲染开销。Nicolas Gallagher 的 micro clearfix（2012）早淘汰了双伪元素写法，Bootstrap 5.3+ 和 Tailwind 默认配置都只用 ::after。
-
content: ""必须保留，否则伪元素不生成 -
display: table比block更稳妥：避免 margin 折叠，兼容老 Safari 对clear的解析差异 -
clear: both是核心，缺它等于没清
@mixin clearfix() 的标准 Sass 写法
直接复用当前主流实践，不加条件判断、不预留 IE 兼容开关：
@mixin clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
}
调用时写 .container { @include clearfix(); }，括号不能省 —— Sass 要求显式调用语法。
立即学习“前端免费学习笔记（深入）”；
- 别用
@extend %clearfix：占位符会把规则复制到每个调用处，CSS 体积膨胀 - 别在 mixin 里塞
@if $ie8：2026 年还手动处理 IE8 是构建层的事，不是样式层的职责 - 别漏掉
&::after的冒号数量：Sass 中写::after（双冒号），不是:after（单冒号）
什么时候根本不用 @mixin clearfix()？
如果父容器已经是 display: flow-root、flex 或 grid，加 @include clearfix() 完全无效且多余 —— 这些值天然触发 BFC，不需要伪元素补救。
-
display: flow-root是目前最干净的替代方案，Chrome 64+、Firefox 58+、Safari 15.4+ 全支持，一行解决 - 混用
float和flex很危险：比如父设display: flex，子却float: left，此时clearfix不起作用 - 动态渲染场景下（Vue/React），必须确保 mixin 编译后的样式在首次挂载前就存在，JS 后续加 class 很可能错过 hydration 时机
真正容易被忽略的点是：清除浮动从来不是为了“让子元素不飘”，而是为了让父容器“承认子元素还在”。所以检查点永远是父容器的高度是否塌陷，而不是子元素有没有左漂右浮。
