SCSS中定义标准clearfix mixin应直接复用Bootstrap 5.3写法：@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } }，必须包含:before和:after双伪元素且display: table以触发BFC并兼容IE8+，漏掉:before会导致旧版Safari外边距折叠异常，仅用display: block在IE8下失效；调用时需写.parent { @include clearfix(); }，括号不可省略。
SCSS中如何定义标准clearfix mixin
直接复用 Bootstrap 5.3 的写法最稳妥，它已覆盖 IE8+ 到现代浏览器。核心是双伪元素 + display: table + clear: both，不能只写 ::after。
常见错误是漏掉 ::before，导致旧版 Safari 外边距折叠异常；或误用 display: block，在 IE8 下失效。
@mixin clearfix() { &:before, &:after { content: ""; display: table; } &:after { clear: both; } }- 若需兼容 IE6/7，补一句
*zoom: 1;（仅 IE 能识别） - 调用时写
.parent { @include clearfix(); }，别漏掉括号
为什么必须用display: table而不是block
display: table 触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素；同时避免 margin-collapse 带来的意外间距。而 display: block 在 IE8 及更早版本中无法正确清除浮动。
性能上无差异，但兼容性落差极大：Bootstrap 官方 mixin 就是靠这个组合撑起多年老项目维护。
立即学习“前端免费学习笔记（深入）”；
-
display: table兼容 IE8+、所有现代浏览器 -
display: block在 IE8 下::after伪元素不生效，清除失败 - 不用
overflow: hidden替代——它会裁剪position: absolute子元素或阴影
在Vue/React组件中使用时的坑
动态渲染场景下，@include clearfix() 必须作用于最终挂载浮动子元素的父容器上，且类名或 mixin 要在首次渲染前就存在。JS 动态添加 class 很可能错过 hydration 或 mount 时机。
- 不要在
v-if或useState切换后才加clearfix类 - 服务端渲染（SSR）时，若浮动内容异步加载，客户端 hydration 后需确保父容器仍带该 mixin 编译出的样式
- Flex/Grid 容器内嵌浮动元素时，
@include clearfix()完全无效——它们天然不塌陷，加了也白加
什么时候不该用clearfix
不是所有浮动都需要清。如果父容器已经建立了 BFC，比如设置了 overflow: auto、display: flow-root，再套一层 @include clearfix() 就是冗余。
display: flow-root 是目前最干净的替代方案，Chrome 64+、Firefox 58+、Safari 15.4+ 都支持，一行 CSS 解决，无需 mixin。
-
display: flow-root比clearfix更轻量，无伪元素开销 - 纯图标+文字行内排版用
float: left时，往往只需文字容器设overflow: hidden对齐，不必整个父层清浮 - Bootstrap 5.3 之后的项目，优先考虑用
class="d-flow-root"（如启用 utilities）而非手动 mixin
