.clearfix 混合必须带参数控制行为，避免无参静态调用；应由父容器显式调用，而非子元素自动触发；现代项目优先用 flex/grid 替代浮动，必要时用 extend 复用并检查编译输出唯一性。
为什么 .clearfix 混合不能只写一次就完事
Less 中的清除浮动混合看似简单，但直接套用老式 zoom: 1 + :after 容易在现代项目中出问题：Flex/Grid 布局下冗余、IE11 以下已淘汰、伪元素干扰 CSS-in-JS 提取、甚至和某些 UI 库的 display: contents 冲突。维护性差的核心不是“写不写”，而是“什么时候该触发、谁来负责清、清完要不要留副作用”。
用 .clearfix() 混合时必须传参控制行为
静态混合（无参数）会强制所有调用处生成相同代码，无法适配不同场景。应改为带可选参数的函数式混合：
.clearfix(@display: block) when (@display = block) {
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
*zoom: 1; // IE6-7 only, keep if needed
}
.clearfix(@display: flex) when (@display = flex) {
display: flex;
flex-wrap: wrap;
}
-
@display: block 是默认兜底，兼容老布局
-
@display: flex 主动放弃清除逻辑，改用 Flex 自然换行 —— 这才是现代维护的起点
- 避免写
.clearfix() { ... } 这种无参形式，它会让后续扩展（比如加 BEM 命名空间或 RTL 支持）变得僵硬
别在组件内部自动调用 .clearfix，让容器决定是否需要清
常见错误是每个卡片、列表项都自带 .clearfix()，结果嵌套三层后出现多重 clear: both，导致高度计算异常或 margin 折叠失效。
- 浮动布局的责任应在**父容器**，而非子元素 —— 子元素只声明
float: left，父元素显式调用 .clearfix()
- 用命名空间区分用途，比如
.layout-grid-clear 或 .form-row-clear，避免全局 .clearfix 被误覆盖
- 如果项目已全面使用 Flex/Grid，
.clearfix() 混合应标记为 @deprecated 并加注释说明替代方案
编译后 CSS 体积和选择器权重容易被忽略
Less 编译时若在多个嵌套规则里重复调用 .clearfix()，会生成多份相同的伪元素代码，且选择器层级叠加后权重飙升，后期想用更轻量的 overflow: hidden 覆盖都难。
- 用
extend 替代多次调用：.card { &:extend(.clearfix all); }，确保 CSS 输出唯一
- 检查编译后 CSS，确认
.clearfix:after 只出现一次 —— 否则说明混合未被正确复用
- 对低权重要求的场景（如工具类），改用
clear: both 单独属性，比整套 clearfix 更轻、更可控
真正难维护的从来不是怎么写清楚浮动，而是判断「此刻是否还该用浮动」——当 .clearfix() 开始需要加注释说明“仅用于遗留表单布局”时，你就该去删它了。
.clearfix() 混合时必须传参控制行为
静态混合（无参数）会强制所有调用处生成相同代码，无法适配不同场景。应改为带可选参数的函数式混合：
.clearfix(@display: block) when (@display = block) {
&:before,
&:after {
content: "";
display: table;
}
&:after { clear: both; }
*zoom: 1; // IE6-7 only, keep if needed
}
.clearfix(@display: flex) when (@display = flex) {
display: flex;
flex-wrap: wrap;
}
-
@display: block是默认兜底，兼容老布局 -
@display: flex主动放弃清除逻辑，改用 Flex 自然换行 —— 这才是现代维护的起点 - 避免写
.clearfix() { ... }这种无参形式，它会让后续扩展（比如加 BEM 命名空间或 RTL 支持）变得僵硬
别在组件内部自动调用 .clearfix，让容器决定是否需要清
常见错误是每个卡片、列表项都自带 .clearfix()，结果嵌套三层后出现多重 clear: both，导致高度计算异常或 margin 折叠失效。
- 浮动布局的责任应在**父容器**，而非子元素 —— 子元素只声明
float: left，父元素显式调用 .clearfix()
- 用命名空间区分用途，比如
.layout-grid-clear 或 .form-row-clear，避免全局 .clearfix 被误覆盖
- 如果项目已全面使用 Flex/Grid，
.clearfix() 混合应标记为 @deprecated 并加注释说明替代方案
编译后 CSS 体积和选择器权重容易被忽略
Less 编译时若在多个嵌套规则里重复调用 .clearfix()，会生成多份相同的伪元素代码，且选择器层级叠加后权重飙升，后期想用更轻量的 overflow: hidden 覆盖都难。
- 用
extend 替代多次调用：.card { &:extend(.clearfix all); }，确保 CSS 输出唯一
- 检查编译后 CSS，确认
.clearfix:after 只出现一次 —— 否则说明混合未被正确复用
- 对低权重要求的场景（如工具类），改用
clear: both 单独属性，比整套 clearfix 更轻、更可控
真正难维护的从来不是怎么写清楚浮动，而是判断「此刻是否还该用浮动」——当 .clearfix() 开始需要加注释说明“仅用于遗留表单布局”时，你就该去删它了。
float: left，父元素显式调用 .clearfix()
.layout-grid-clear 或 .form-row-clear，避免全局 .clearfix 被误覆盖.clearfix() 混合应标记为 @deprecated 并加注释说明替代方案.clearfix()，会生成多份相同的伪元素代码，且选择器层级叠加后权重飙升，后期想用更轻量的 overflow: hidden 覆盖都难。
- 用
extend替代多次调用：.card { &:extend(.clearfix all); }，确保 CSS 输出唯一 - 检查编译后 CSS，确认
.clearfix:after只出现一次 —— 否则说明混合未被正确复用 - 对低权重要求的场景（如工具类），改用
clear: both单独属性，比整套 clearfix 更轻、更可控
.clearfix() 开始需要加注释说明“仅用于遗留表单布局”时，你就该去删它了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
