BEM 中不能将 clearfix 作为 block 名，因其是无语义的工具类而非可复用组件；应使用 u-clearfix 工具类、SCSS mixin 或 display: flow-root 实现清除浮动。
clearfix 不能作为 BEM 的 block 名
直接写 .clearfix 作为 block 是错的。BEM 要求 block 必须是语义完整、可复用的视觉/功能单元，比如 .header、.card；而 clearfix 不渲染内容、不承载业务逻辑，只是解决布局副作用的底层机制——它本质是工具类（utility），不是组件。
强行当 block 会带来两个实际问题：
• 命名污染，比如 .clearfix__item 完全无意义
• 破坏块隔离原则：清除浮动必须作用于浮动子元素的**直接父容器**，和子元素的 BEM 结构无关，硬套 __ 关系反而掩盖了真实职责
正确做法：全局 u-clearfix 工具类或 SCSS mixin
把清除浮动能力抽成与 BEM 命名体系解耦的方案，才能兼顾复用性与语义清晰：
- 用
u-clearfix前缀（u-表示 utility），作为全局类名，例如：<div class="sidebar u-clearfix"> - 在 SCSS 中封装为
@mixin clearfix，按需混入目标 block 规则内，不暴露额外 class —— 这样 HTML 更干净，样式作用域也更可控 - 若团队要求所有工具类走 BEM 风格，至少降级为
u-clearfix，而非clearfix本身当 block
为什么不能写 .block__element_clearfix
这种写法违反 BEM 核心规则：修饰符（--）只能描述 block 或 element 自身的状态变化（如 .button--disabled），不能用来“修复外部布局问题”。clear: both 不是 element 的状态，而是父容器需要承担的布局责任。
立即学习“前端免费学习笔记（深入）”；
更关键的是技术事实：
• .article__content_clearfix 加在子元素上完全无效 —— 清除浮动必须作用于**浮动子元素的直接父容器**
• 即使 .article__content 是那个父容器，加修饰符也掩盖了它作为“浮动容器”的真实角色
• 正确写法是：<div class="article__content u-clearfix"> 或直接在 SCSS 里 @include clearfix 到 .article__content 规则中
现代项目优先用 display: flow-root 替代
如果不需要支持 IE11，display: flow-root 是比任何类名都更干净的解法：
- 它强制容器生成新的 BFC，天然包裹内部浮动子项，无需伪元素、无 DOM 开销
- 只需一行：
.sidebar { display: flow-root; } - 兼容性良好（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），2026 年绝大多数项目已可放心使用
- 注意它会禁用 margin-collapse，若页面依赖外边距合并，得额外检查布局是否偏移
真正容易被忽略的点是：清除浮动从来不是“给某个元素加个类就完事”，而是要明确「谁是浮动子元素的直接父容器」，并让那个容器显式声明自己要承担包裹职责——无论用 u-clearfix、@include clearfix 还是 display: flow-root，这个判断不能绕开。
