.clearfix 混合必须带参数控制行为，避免无参静态调用；应由父容器显式调用，而非子元素自动触发；现代项目优先用 Flex/Grid 替代浮动，必要时用 extend 复用并检查编译输出唯一性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

为什么 .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() 开始需要加注释说明“仅用于遗留表单布局”时，你就该去删它了。