直接用::after清浮动常失效，因伪元素默认display为inline而clear仅对block/table生效，且IE6-7需zoom:1触发hasLayout；标准clearfix混合宏需content:""、display:table、clear:both及*zoom:1兼容。
为什么直接用 ::after 伪元素清浮动经常失效
因为没重置默认样式，也没处理 display 和 clear 的组合行为。浏览器对伪元素的默认 display 是 inline，而 clear 只对 block 或 table 生效；同时若父容器有 zoom: 1（IE hack）但没配合 *height: 0，在旧版 IE 中仍可能塌陷。
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 标签。
关键细节：
-
&::before和&::after必须共用display: table，否则::before可能撑高容器顶部空白 -
*zoom: 1是 Less 编译后保留的 IE hack，*前缀会被 CSS 解析器忽略，仅 IE6–7 识别 - 不要写
height: 0或visibility: hidden——content: ""+display: table已足够“隐形”
现代项目要不要删掉 IE 兼容代码
要看构建流程是否自动剔除。如果用 PostCSS + autoprefixer 且目标浏览器不含 IE，那 *zoom: 1 确实冗余；但 Less 本身不识别浏览器目标，它只是字符串拼接，删了就真没了。
更安全的做法是条件化保留：
.clearfix() {
&::before,
&::after {
content: "";
display: table;
}
&::after {
clear: both;
}
// 仅当需要支持 IE6–7 时启用
.ie-compat() when (@support-ie = true) {
*zoom: 1;
}
.ie-compat();
}
调用时传参：.clearfix() with (@support-ie: false);。不过大多数团队现在直接删掉整行更省心。
为什么不用 overflow: hidden 替代 clearfix
它看似简单，但副作用太具体：会裁剪 position: absolute 子元素超出父边界的区域、影响 transform 动画的渲染层、且无法解决 margin 合并问题。而 clearfix 是语义明确的“清除浮动”，不干涉其他布局逻辑。
典型踩坑场景：
- 下拉菜单用
absolute定位，父容器加了overflow: hidden→ 菜单被截断 - 卡片有阴影和 transform 动画，
overflow: hidden导致阴影消失或闪烁 - 浮动元素下方紧挨着一个
margin-top: 20px的块级元素 → 浮动导致 margin 合并，overflow无法修复
所以只要涉及浮动布局，.clearfix() 仍是唯一可控、无副作用的选择。真正该淘汰的不是它，而是还用 float 做整体布局的设计思路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
