直接用 float: none 无法安全重置浮动，因其会破坏依赖浮动的布局；clearfix 应作为按需使用的工具类，需同时触发 BFC 并兼顾兼容性，现代项目优先用 display: flow-root。
为什么直接用 float: none 重置不了所有浮动？
很多人以为在 Base.css 里写 * { float: none !important; } 就能“一键清浮”，实际会破坏所有依赖浮动的布局（比如旧版导航、图文混排），甚至干扰第三方 UI 组件。浮动不是“错误”，而是有明确用途的 CSS 特性；所谓“重置”，本质是**控制何时启用、如何清除**，而不是暴力归零。
clearfix 类该定义在哪儿？为什么不能只靠 ::after？
把 clearfix 定义为一个可复用的工具类（如 .clearfix），比全局钩子更可控。它必须同时满足两个条件才能可靠生效：
- 触发 BFC（块级格式化上下文），否则父容器仍会塌陷
- 确保伪元素不被其他样式意外覆盖（比如
content: ""被设为none）
推荐写法：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
注意：仅用 ::after 不够——缺少 ::before 会导致 IE8 下首行文字上移；display: table 比 block 更稳妥，兼容老浏览器且天然触发 BFC。
现代项目还要手写 clearfix 吗？
如果项目已全面支持 Flex/Grid，那多数容器根本不需要浮动，也就无需 clearfix。但以下场景仍绕不开：
- 维护遗留代码（尤其含
float: left的侧边栏+主内容结构） - 需要兼容 IE9–IE11 的企业内网系统
- 第三方富文本编辑器输出的 HTML（常带内联
float）
此时建议：在 Base.css 中保留 .clearfix 类，但**不自动应用到所有块级元素**；只在明确需要包裹浮动子项的父容器上手动添加 class="clearfix"。
容易被忽略的坑：伪元素和 zoom 的冲突
有些团队为兼容 IE7，在 Base.css 里写了 * { zoom: 1; }。这会导致 .clearfix::before 和 ::after 在 IE7/8 中重复渲染两次（zoom 触发 hasLayout，叠加伪元素），造成额外空白或错位。
解决方案很直接：
- 删掉全局
zoom，改用更精准的.clearfix { *zoom: 1; }（仅作用于需要的类） - 或者彻底放弃 IE7 支持，用更轻量的现代方案：
.clearfix { display: flow-root; }（Chrome 58+/Firefox 57+ 支持，一行替代全部）
真正麻烦的从来不是怎么写 clearfix，而是你不知道哪个老组件正悄悄依赖它——上线前务必查 DOM，看关键容器是否真的“撑开了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
