::after能清浮动而::before不行，因::after位于容器末尾可设clear: both下移撑开父容器，::before在开头无约束力；必须设content: ""且display为block/table等块级值。
为什么 ::after 能清浮动，而 ::before 不行？
浮动元素会脱离文档流，导致父容器高度塌陷。::after 伪元素插在容器末尾，通过设置 clear: both 强制它“下移”到浮动元素下方，从而撑开父容器；::before 插在开头，对后续浮动无约束力，起不到清除作用。
- 必须同时设置
content: ""，否则伪元素不渲染 -
display推荐用table或block，不用inline（后者无法触发clear） -
visibility: hidden比height: 0更稳妥，避免某些旧版浏览器对0高度的异常处理
.clearfix::after {
content: "";
display: table;
clear: both;
}
clearfix 类必须加 display: block 吗？
不是必须，但绝大多数场景下你得确保父容器是块级上下文。如果父元素是 display: inline 或 inline-block，::after 的 clear: both 会失效——因为 clear 只对块级框生效。
- 常见踩坑：给
<span></span>或设置了display: inline-flex的容器加.clearfix，完全没用 - 安全做法：显式声明
display: block（或flex/grid），不依赖默认值 - 若父容器已是
flex或grid，根本不需要clearfix——浮动在这些布局中本就不影响容器高度
现代 CSS 中，clearfix 还有必要写吗？
在只支持 Flexbox / Grid 的项目里，基本可以删了。但只要还存在以下任一情况，就仍需保留：
-
需兼容 IE10–IE11（它们不支持
display: grid，且flex-wrap对浮动清除无效）立即学习“前端免费学习笔记（深入）”；
页面中混用浮动与传统块流布局（比如老式栅格、图文环绕）
第三方组件库内部用浮动实现，你无法改其结构
不要为了“看起来现代”而盲目移除——实际渲染结果比规范优先级高
工程中建议用 PostCSS 插件自动注入，而不是全局无脑加
.clearfix如果用的是 Tailwind，
after:clear-both这类工具类本质还是同一套逻辑，只是封装了
为什么有些 clearfix 实现用 display: table？
display: table 是一种“零副作用”的块级化方式：它能触发 BFC（块级格式化上下文），天然隔离浮动影响，且不会像 overflow: hidden 那样意外裁剪子元素的 position: absolute 或阴影。
-
display: block+clear: both够用，但若父容器已有overflow: auto，可能和clear产生冲突 -
display: table兼容性极好（IE8+），且不改变盒模型尺寸计算逻辑 - 注意：不要用
display: table-cell，它会强制继承父table行为，容易引发嵌套错乱
真正容易被忽略的，是伪元素的 content 属性——空字符串 "" 和缺失它，效果天差地别。漏写这行，整个类就等于没写。
