Less中.clearfix()混入的content应使用" "（空格）而非""，因IE8对空字符串解析不稳定；display必须为table而非block，否则无法创建匿名表格盒子撑开父高；现代项目应弃用*zoom:1，优先采用display:flow-root。
Less里写.clearfix()混入时，content该用""还是" "
IE8对content: ""解析不稳定，可能不触发伪元素渲染，导致清浮动失效；更稳妥的做法是用content: " "（一个空格）。这个空格在视觉上不可见，但能确保所有主流浏览器（包括IE8）都正确生成伪元素。
关键点：
-
content: " "比content: ""兼容性更强，尤其在IE8及部分旧版Android WebView中 - 不要用
content: "\00a0"或content: "\200B"——这些Unicode字符在某些Less编译器里会被转义或截断 - 若项目已明确不支持IE8，
content: ""可接受，但需确认构建链路（如PostCSS插件）未意外移除它
display: table 和 display: block 哪个更适合伪元素
必须用display: table，不能简写成display: block。因为clear: both只对参与块级格式化上下文（BFC）或表格格式化上下文的元素生效；display: block不会创建匿名表格盒子，无法撑开父容器高度，清浮动会失败。
常见误判：
立即学习“前端免费学习笔记（深入）”；
- 看到“block就能清除”就换掉
display: table——实际是display: table配合content才让伪元素成为“无尺寸但可参与布局计算”的容器锚点 - 把
&::before设成display: table，&::after设成display: block——会导致::before额外撑高顶部空白 - 漏掉
&::before——虽然多数场景只靠::after也能清，但::before用于修复Webkit内核下外边距合并（margin collapse）问题
要不要保留 *zoom: 1 兼容IE6–7
现在基本不用了。IE6–7早已退出主流支持范围，且*zoom: 1在现代浏览器中是无效声明，虽不影响渲染，但会增加CSS体积、干扰调试（比如在DevTools里看到冗余属性），还可能与transform等属性产生层级冲突。
除非你明确要支持IE6–7（极罕见），否则直接删掉。如果构建流程用了Autoprefixer或browserslist控制目标环境，Less本身不会自动剔除它——它只是字符串拼接，写了就真输出。
替代方案：
- 用
display: flow-root（Chrome 64+/Firefox 62+）代替整个clearfix逻辑，一行解决，无副作用 - 若需兼容稍老版本（如Safari 10.1+），可用
display: -webkit-flow-root并配PostCSS自动补全 - Flex/Grid布局下根本不需要clearfix——浮动在这些上下文中被忽略或失去意义
为什么封装成混入比直接写class更可靠
混入（mixin）能避免选择器污染和样式泄漏。比如.clearfix类名一旦全局定义，就可能被其他团队成员无意复用，或与第三方UI库冲突；而.my-card { .clearfix(); }的作用域严格限定在当前选择器内，编译后CSS只出现在需要的地方。
实操注意：
- 别把混入写成
.clearfix() { ... }再全局调用——这仍可能造成命名冲突；应定义为.cf() { ... }这类缩写，降低重名概率 - 混入里不要加
height: 0或visibility: hidden——content: " "+display: table已足够“隐形”，加了反而在某些缩放场景下暴露白线 - 如果项目用CSS Modules或Scoped CSS，混入仍是首选：它不依赖HTML class绑定，也不受作用域隔离影响
最易被忽略的一点：伪元素的clear必须写在&::after上，而不是父选择器本身；很多人写成& { clear: both; }，这完全无效——clear不是用来清自己，而是告诉后续元素“别挨着我浮动的兄弟”。
