推荐用@mixin clearfix封装，输出::before、::after及*zoom:1兼容IE6/7，避免手动重复、维护难和失效问题；但BFC已触发时（如overflow:hidden、flex/grid）不应滥用。
为什么直接写 .clearfix::after 不够用
因为每次都要手动加类、复制粘贴伪元素代码，容易漏掉 zoom: 1（IE6/7 兼容必需），也难统一维护。更麻烦的是，当项目里有多个 SCSS 文件各自定义 ::after 时，可能因选择器权重或加载顺序导致清除失效。
怎样用 @mixin clearfix 实现真正通用的封装
核心是让 mixin 输出稳定、可复用、带兼容性兜底的 CSS 块，而不是只生成 ::after。推荐写法如下：
@mixin clearfix {
&::before,
&::after {
display: table;
content: "";
}
&::after {
clear: both;
}
// IE6/7 兼容：触发 hasLayout
*zoom: 1;
}使用时只需：@include clearfix;，它会自动作用于当前选择器上下文，比如 .container 或 &.list。
- 不推荐用
content: "."—— 部分屏幕阅读器会读出点号，语义污染 - 必须保留
*zoom: 1—— 虽然现代项目可能已放弃 IE 支持，但若团队仍需兼容旧系统，漏掉它会导致 IE6/7 下高度塌陷重现 - 不用
display: block+height: 0—— 这种写法在某些 flex 容器中会意外撑开基线，display: table更稳妥
什么时候不该用 @mixin clearfix
当父容器本身已经是 BFC 触发元素时，加 clearfix 是冗余甚至有害的。比如：
立即学习“前端免费学习笔记（深入）”；
- 父级设置了
overflow: hidden、display: flow-root或contain: layout - 父级是 flex/grid 容器（
display: flex/display: grid） - 子元素虽 float，但父级高度本就由其他非浮动内容撑开
强行加 @include clearfix 可能导致伪元素干扰布局流，尤其在嵌套 flex 场景下，::after 会被当作一个匿名 flex item 处理，引发意料外的换行或对齐问题。
如何避免团队协作中误用 clearfix Mixin
最常被忽略的点是：Mixin 封装 ≠ 无脑套用。建议在项目中做两件事：
- 在基础样式层（如
_base.scss）里定义@mixin clearfix，但**不提供全局.clearfix类** —— 防止设计师或后端直接在 HTML 里硬写 class，绕过 SCSS 管控 - 搭配 lint 规则（如 stylelint 的
selector-no-vendor-prefix和no-duplicate-selectors）检查是否在已触发 BFC 的容器上重复调用该 mixin - 在组件文档中标注「本组件内部已通过
display: flow-root解决浮动塌陷，无需额外@include clearfix」—— 比写注释更可靠
真正难的不是写出一个能用的 mixin，而是让团队理解：清除浮动本质是修复渲染上下文缺陷，而现代 CSS 提供了比 clearfix 更干净的替代方案。Mixin 只是过渡期的胶水，不是银弹。
