.clearfix()混合宏应包含&::before和&::after伪元素，content设为" "（空格），display: table，且::after需clear: both；Flex/Grid容器无需使用，避免冗余代码和布局破坏。
Less里怎么写.clearfix()混合宏
直接用.clearfix()比每次手写::after规则更稳，关键是它把触发BFC、清空内容、兼容处理全打包了。别用content: ""——IE8和部分旧Android WebView会漏渲染伪元素；得用content: " "（一个空格），视觉无感但100%生效。
必须配display: table，不是block。因为clear: both只对参与表格格式化上下文的元素起作用，display: block无法撑开父容器高度。漏掉&::before也容易踩坑：虽然多数情况::after够用，但::before能防Webkit下外边距合并问题。
-
&::before和&::after都要设content: " "和display: table -
&::after额外加clear: both - 现代项目不用
*zoom: 1，它在Chrome/Firefox里纯属冗余，还干扰调试
Sass里用@mixin定义clearfix
Sass写法更强调参数控制和模块化。用@mixin clearfix($ie8: false)可以开关IE兼容逻辑，避免无用代码进生产包。注意Sass不支持*zoom这种hack语法，真要支持IE8得靠Autoprefixer后处理，或者干脆交给构建层统一处理。
别用@extend %clearfix混入全局占位符——它会把样式规则复制到每个调用处，导致CSS体积膨胀；@include clearfix才是正确姿势，生成的是内联样式块，干净可控。
立即学习“前端免费学习笔记（深入）”；
- 参数默认关掉IE8支持：
@mixin clearfix($ie8: false) - 条件注入
zoom: 1时用@if $ie8包裹 - 避免
%clearfix，优先用@include调用
为什么不能在Flex/Grid容器里硬套clearfix
Flex或Grid容器本身已建立新的格式化上下文，浮动子项根本不会导致父容器塌陷——此时调用.clearfix()不仅多余，还会破坏布局流。clear属性在Flex/Grid里被忽略，而::after伪元素会作为普通子项插入，可能打乱order或grid-area定位。
- Flex容器内想对齐？用
align-items或margin，别浮动 - Grid区域里浮动？无效，Grid项不受
float影响 - 单纯为撑高？改用
min-height或height: fit-content
编译后CSS体积和调试陷阱
Less/Sass本身不删代码，写了就输出。比如*zoom: 1哪怕目标浏览器是Chrome 120，也会原样出现在CSS里——它不报错，但占带宽、拖解析、让DevTools里多出一堆灰色无效属性。
另一个隐形坑是content值被PostCSS插件误删。有些压缩工具会把content: " "当成空格干掉，变成content: ""，结果IE8下清浮动失效。上线前务必检查编译产物里content是否还在。
- 构建链路里有PostCSS？确认
content没被cssnano等插件过滤 - 用
content: " "而非content: "\00a0"，后者在某些Less版本里会被转义截断 - 调试时打开DevTools Elements面板，直接看
::after是否真实渲染出来
