最简可靠的clearfix mixin为@mixin clearfix { &::after { content: ""; display: table; clear: both; } }，它兼容IE8+且不干扰现代布局；仅当需支持IE6/7时才加*zoom: 1。
为什么直接用 ::after 伪元素写 clearfix 更可靠
因为现代浏览器对 ::after 的支持稳定，且能避免旧式 zoom: 1 在 Flex/Grid 布局中引发的意外缩放或溢出。Sass 混合宏本质是代码复用，但核心逻辑必须基于已验证有效的 CSS 清除浮动方案。
常见错误是把 IE6/7 的 zoom: 1 当成必需项塞进混合宏里——现在绝大多数项目已不需兼容这些版本，硬加反而干扰 BFC 触发逻辑。
- 只在父容器需要包裹浮动子元素时才调用该混合宏
- 确保父容器没有设置
overflow: hidden或display: flex等已自带清除能力的属性，否则混合宏冗余 - 若项目仍需支持 IE8，可加
*zoom: 1（注意是星号 hack，非标准属性）
@mixin clearfix 的最小可用实现
下面是最简、无副作用的写法，适用于 Sass 3.4+ 和 Dart Sass：
@mixin clearfix {
&::after {
content: "";
display: table;
clear: both;
}
}
关键点在于：display: table 触发 BFC，比 display: block 更稳妥；clear: both 确保清除两侧浮动；content: "" 不可省略，否则伪元素不渲染。
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
不要写成 display: block; height: 0; visibility: hidden; —— 这类“隐藏元素”方式在某些移动端 WebView 中会失效，且增加重排风险。
如何避免在 Flex 或 Grid 容器里误用 clearfix
当父容器已设 display: flex 或 display: grid，子项浮动会被忽略，此时调用 @include clearfix 不仅无效，还可能因 ::after 插入额外节点，干扰布局流。
- 检查父容器是否已有现代布局模式：用 DevTools 查看 computed
display值 - 如果子项本就用
float，优先考虑改用flex或grid替代——浮动本身已是过时方案 - 若必须保留浮动（如第三方组件不可控），再启用
clearfix，并确保父容器未同时设display: flex
要不要加 @at-root 或作用域控制？
不需要。Sass 的 @mixin 默认按调用位置展开，&::after 中的 & 会正确解析为当前选择器，不会污染全局。强行用 @at-root 反而让生成的选择器脱离上下文，比如：
.card {
@include clearfix; // 正确生成 .card::after
}
// 错误示例（不用）：
@mixin clearfix {
@at-root #{&}::after { ... }
}
真正容易被忽略的是：混合宏不能解决「浮动元素高度塌陷以外」的问题。例如父容器有 margin 折叠、子项绝对定位脱离文档流——这些都不是 clearfix 的职责范围。
