直接用clearfix mixin比写重复html更可靠，因其通过伪元素触发bfc解决父容器高度计算失效问题，避免overflow:hidden裁剪绝对定位元素等副作用，且可复用、可控、无冗余。
为什么直接用 clearfix Mixin 比写重复 HTML 更可靠
因为浮动塌陷不是样式“看起来不对”，而是父容器高度计算失效，影响布局流和后续元素定位。单纯加 overflow: hidden 会裁剪 position: absolute 子元素或阴影，而 ::after 伪元素方案可控、无副作用，且能复用到任意需要的块级容器上。
Less 的 .clearfix() Mixin 就是把这套标准清除逻辑封装成可调用的样式块，避免每个地方都手写 &::after 规则。
如何定义一个真正兼容的 .clearfix() Mixin
关键在于三点：触发 BFC、清空内容、兼容老版本 IE（如果项目还需支持）。
- 必须声明
content: ""，否则伪元素不渲染 - 必须设
display: table或block，table更稳妥（避免某些安卓 WebView 下block失效） - IE8 及以下需额外加
*zoom: 1触发 hasLayout
.clearfix() {
&::after {
content: "";
display: table;
clear: both;
}
// IE8-
*zoom: 1;
}
什么时候不该用 .clearfix()，以及替代方案
现代布局中，很多场景其实不需要它——比如 Flex 或 Grid 容器天然不塌陷；或者父元素本身已设 overflow: auto 且无裁剪风险。
- Flex 容器内子项浮动？别这么做，用
align-items或margin控制对齐 - Grid 区域内浮动？同样无效，Grid 项不受浮动影响
- 仅为了撑开高度？优先考虑
min-height或height: fit-content
强行在 Flex/Grid 容器里调用 .clearfix() 不报错，但伪元素会破坏 flex flow，且 clear 属性被忽略。
如何让 .clearfix() 支持条件注入（比如只在特定断点启用）
Less 支持 Mixin 带参数，可以控制是否输出 IE 兼容代码，或是否添加额外 class 名用于调试：
.clearfix(@ie8: true) {
&::after {
content: "";
display: table;
clear: both;
}
.if(@ie8) {
*zoom: 1;
}
}
<p>// 使用
.container {
.clearfix(false);
}</p>
注意：Less 的条件判断必须用 .if() + 布尔参数，不能用 JS 式的 if (@ie8) { ... }，否则编译失败。
实际项目里最容易被忽略的是：Mixin 调用位置必须在选择器内部，不能独立写在顶层；还有，如果父选择器用了 & 嵌套，&::after 才能正确解析为后代关系，否则可能生成错误的嵌套结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
