.clearfix Mixin 不生效是因为未显式调用（如 .card { .clearfix(); }），或误当HTML类名使用；它仅在编译期展开为内联样式，不生成独立CSS规则，且仅对含浮动子元素的父容器有效。
为什么直接用 .clearfix Mixin 有时不生效？
Less 中的 .clearfix Mixin 本质是注入一段包含 ::after 伪元素和 clear: both 的 CSS，但它不会自动应用——你得显式调用它。常见错误是定义了 Mixin 却忘记在目标选择器里写 .clearfix();，或者把它当成了类名直接写在 HTML class 属性里（比如 class="clearfix"），而实际它只是个编译期指令。
- Mixin 不生成独立 CSS 规则，只展开为内联样式块
- 必须在需要清除浮动的容器选择器内部调用，例如
.card { .clearfix(); } - 若使用带参数的版本（如支持 zoom 兼容 IE），需传入对应参数，否则可能漏掉关键声明
标准 .clearfix Mixin 写法与兼容性取舍
最简可用版本只需处理现代浏览器，但若项目仍需支持 IE8/9，就得补上 zoom: 1 触发 hasLayout。Less 里可写成带默认参数的 Mixin，避免每次重复传参：
.clearfix(@zoom: true) {
&::after {
content: "";
display: table;
clear: both;
}
when (@zoom = true) {
zoom: 1;
}
}-
@zoom: true是默认行为，调用.clearfix();就会插入zoom: 1 - 调用
.clearfix(false);可禁用 zoom，适合纯现代项目 - 注意
&::after语法必须用&，否则生成的选择器会错位（如变成div::after而非div::after在 div 内部）
调用时容易忽略的 DOM 结构前提
.clearfix 只对浮动子元素的父容器有效。如果子元素没设 float，或浮动元素被 position: absolute 拉出文档流，再怎么加 .clearfix() 也没用。
- 确保子元素确实用了
float: left或float: right - 避免在 flex / grid 容器上滥用
.clearfix—— 这些布局模型天然不触发父容器高度塌陷 - 若子元素用了
display: inline-block导致间隙，这不是浮动问题，.clearfix解决不了
更现代的替代方案：什么时候该放弃 .clearfix？
CSS Grid 和 Flexbox 已成为主流布局手段，它们本身不依赖浮动，也不存在父容器高度塌陷问题。如果你正在维护老项目，.clearfix 仍有价值；但新项目中，优先考虑：
立即学习“前端免费学习笔记（深入）”；
- 用
display: flex替代浮动布局，无需清除 - 用
display: grid控制行列，浮动根本不会出现 - 若必须用浮动（如图文环绕），确认是否真需要“清除”——有时
overflow: hidden或overflow: auto更轻量，且 Less 里一行就能写：overflow: hidden;
真正麻烦的是混合场景：比如一个组件库既要支持旧版 IE，又要适配新布局，这时 Mixin 的参数化就体现出价值——而不是堆砌多个命名不同的清除类。
