原生css不支持clearfix混合宏，它仅存在于less/sass等预处理器中；@import在css中只能加载纯css文件，无法导入mixins；现代布局应优先使用display:flow-root替代clearfix。
不能在纯 CSS 中引入 clearfix 混合宏——它根本不存在于原生 CSS 语法中。 你看到的 .clearfix() 或 @mixin clearfix 全部来自预处理器（Less/Sass），浏览器解析 CSS 时直接忽略这些语法，报错或静默失效都是常态。
为什么 @import "clearfix.scss" 在 CSS 里完全无效
原生 CSS 的 @import 只能加载另一份 CSS 规则文本，不支持变量、混合宏、条件判断或作用域控制。如果你写了：
@import "mixins/clearfix.css";
结果只有两种可能：① 文件 404 报错；② 文件被当普通 CSS 加载，但里面写的 .clearfix() { ... } 因为不是合法 CSS 声明，整条规则被丢弃——.clearfix() 不会生成任何样式，调用处 .card { .clearfix(); } 更是直接语法错误，浏览器根本不认。
Less 中正确声明和调用 .clearfix()
必须严格满足三个条件，缺一不可：
- 定义必须带英文小括号：
.clearfix() { &::after { content: ""; display: table; clear: both; } }（写成.clearfix或.clearfix;就会去匹配类名，找不到就报错） - 调用也必须带括号：
.card { .clearfix(); }（漏掉()，Less 编译器不会警告“少括号”，而是报“未定义选择器”） - 不能在嵌套块里裸调用：在
.card { }内写:hover { .clearfix(); }，编译结果是:hover { ... }全局生效；正确写法是&:hover { .clearfix(); }，确保生成.card:hover
Sass 用户请别用 @import，改用 @use
Sass 4.0+ 已废弃 @import，它会把所有 mixin 和变量平铺进全局作用域，极易冲突。正确姿势是：
@use 'mixins' as m;<br>.card { @include m.clearfix; }
好处是命名空间隔离、自动 tree-shaking（没用到的 mixin 不会打进最终 CSS）、支持私有成员（加 _ 前缀）。如果旧项目还在用 @import "mixins"，升级时务必同步迁移，否则多人协作时一个同事改了 $spacing，全站布局可能突然错位。
最容易被忽略的一点：clearfix 不是万能解。现代布局（Flex/Grid）天然不塌陷，强行给 display: flex 容器加 clearfix 不仅多余，还可能干扰 align-items 行为。只在 float 场景下用，且优先考虑用 display: flow-root 替代——它原生支持、无需预处理器、CSS 零配置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
