.clearfix()混合器应仅含content: " "; display: table; clear: both三要素，用&:before, &:after双伪元素确保bfc稳定，避免zoom、height: 0等冗余声明，不用于flex/grid容器或flow-root已启用场景。
Less中如何定义.clearfix()混合器而不触发IE兼容模式副作用
直接写.clearfix()混合器时，必须避开zoom: 1和*zoom: 1——这些是IE6/7的hasLayout hack，在现代项目里不仅无效，还会干扰transform层级、引发z-index异常。Less编译后若生成带星号前缀的属性，可能被Autoprefixer误判为需保留，反而污染CSS输出。
正确做法是只保留现代安全三要素：content、display: table、clear: both。IE8+已原生支持伪元素和display: table，无需降级补丁。
-
content必须用" "（空格），不是""；IE8对空字符串渲染不稳定，会丢失伪元素 -
display: table不能简写成block；只有table能创建匿名表格盒子，确保父容器高度被撑开 - 不要加
height: 0或visibility: hidden；它们不参与BFC计算，纯属冗余，增加CSS体积
为什么用&:before, &:after而不是只用&:after
只靠&:after在部分老Android WebView（4.4以下）和旧版Safari中会失效——因为:before参与了格式化上下文初始化，双伪元素组合能强制触发更稳定的BFC边界。这不是过度设计，而是实测兼容底线。
Less中写法必须显式展开：
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
不能合并写成&:before, &:after { clear: both; }——那样:before没clear，但display: table已足够让它参与布局；真正起清除作用的只有:after。
Micro Clearfix在Less中的性能优化点
所谓“Micro”，核心是删减所有非必要声明。对比传统clearfix，它砍掉了：font: 0/0 a（过时的字体hack）、visibility: hidden（无布局影响）、height: 0（伪元素本身不占空间）。最终输出CSS体积减少约35%，且无运行时渲染开销。
- 编译后CSS不含任何注释或空行，适合嵌入组件库或微前端子项目
- 混合器不依赖外部变量，不读取
@arguments，调用时零参数，避免Less解析延迟 - 不使用
.clearfixMixin之类长名——命名越短，Less AST遍历越快，尤其在大型样式表中
什么时候不该用这个.clearfix()混合器
如果父容器已经设了display: flex或display: grid，再套.clearfix()毫无意义：浮动子项在Flex/Grid容器内自动脱离浮动行为，clear失效，伪元素也无布局作用。
同样，若项目已全面启用display: flow-root，就该停用所有clearfix方案。它比伪元素更轻量，且无content字符串解析成本——但要注意，flow-root会禁用外边距合并（margin collapse），这点常被忽略。
最易踩的坑是：在Less中把.clearfix()写在媒体查询内部，却忘了它需要被所有断点复用。正确姿势是定义在全局变量区，而非嵌套作用域里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
