如何高效在Less中实现清除CSS浮动并编写通用的clearfix混合宏？

本文共计796个文字，预计阅读时间需要4分钟。

由于未设置默认样式，浏览器对伪元素的处理如下：

Less 混合宏必须显式覆盖这些点：

• content: "" 不可省略，否则伪元素不渲染
• display: table 比 block 更稳妥，避免 inline 元素换行干扰布局
• 必须设 clear: both，且作用于伪元素本身，不是父元素
• 为兼容 IE6–7，需额外加 zoom: 1 触发 hasLayout

标准 clearfix 混合宏写法（含 IE 兼容）

这是经过多项目验证的最小可用版本，不依赖外部类名，直接复用：

.clearfix() { &::before, &::after { content: ""; display: table; } &::after { clear: both; } // IE6–7 *zoom: 1; }

用法：.my-container { .clearfix(); }。注意它只作用于当前选择器，不会污染全局，也无需额外 HTML 标签。