.clearfix 必须用 ::after 而非 ::before，因 ::after 插入末尾可撑开父容器高度，::before 插入开头对高度无贡献；content: "" 和 display: table 不可省略，以确保伪元素生成并触发 BFC。

为什么 .clearfix 必须用 ::after 而不是 ::before

浮动元素脱离文档流，父容器高度塌陷，单纯给父元素设 overflow: hidden 会意外裁剪 position: absolute 子元素或遮挡 box-shadow。真正可靠的清除方式是触发 BFC 并插入“看不见的清空节点”。::after 插在末尾才能撑开父容器；用 ::before 会插在开头，对高度无贡献。

Less 中写法要确保伪元素可渲染：

.clearfix {
  &::after {
    content: "";
    display: table;
    clear: both;
  }
}

注意：content: "" 不可省略，否则伪元素不生成；display: table 比 block 更安全——它天然形成 BFC，且不会引入额外的外边距。

如何兼容 IE8 及更老浏览器

IE8 支持 :after（单冒号），但不支持 ::after（双冒号）。若项目仍需兼容 IE8，Less 中不能只写 &::after，得显式补全旧语法：

.clearfix {
  *zoom: 1; // 触发 IE6/7 hasLayout
  &::after,
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

其中 *zoom: 1 是 IE 专有 hack，仅 IE6/7 解析，用于触发 hasLayout 防止自身塌陷；&:after 确保 IE8 能识别。现代项目若已放弃 IE8，可删掉这两行。

为什么不用 display: flex 或 display: grid 替代

虽然 display: flex 或 grid 父容器天然不塌陷，但它们会彻底改变子元素布局行为：

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• float: left 在 flex 容器中失效，原有浮动布局会崩坏
• 子元素的 vertical-align、margin-collapse 等 CSS 行为全部重置
• 响应式断点中切换 display 类型极易引发意外交互（比如动画中断、reflow 频繁）

所以 .clearfix 的定位很明确：**只解决塌陷，不干涉布局逻辑**。它和浮动共存，是渐进增强而非推倒重来。

Less 中如何避免重复编译出多份 .clearfix

如果多个文件都 @import "mixins/clearfix.less" 并直接调用 .clearfix()，最终 CSS 可能出现几十个重复的 .clearfix 规则。正确做法是：

• 把 .clearfix 定义为 class（非 mixin），只在一处声明（如 base.css）
• 所有需要清除浮动的地方，直接写 HTML class：
• 若真要用 mixin 封装，必须加 !important 防止被覆盖，且仅在局部覆盖场景下使用

Less 编译器不会自动去重 class，靠人控制引入位置和使用方式。

最常被忽略的一点：清除浮动类只对「内部有浮动子元素」的容器有效；如果子元素用的是 inline-block、flex 或 grid，加 .clearfix 完全没用——得先确认塌陷的真实原因。