tailwind 默认不提供 .clearfix 类，因其认为浮动是过时布局手段，主张用 flex、grid 等现代方案替代；若需兼容旧代码，可手动在 @layer utilities 中定义并启用 content 变体。
没有现成的 .clearfix 类，但有更直接、更现代的替代方案。
为什么 Tailwind 默认不提供 .clearfix
Tailwind 认为浮动（float）是过时的布局手段，它的设计哲学是“用现代布局模型替代 hack”，而不是修补旧机制。所以官方既不内置 .clearfix，也不鼓励在新项目里用浮动来实现栅格或两栏布局。
- 强行复制 Bootstrap 的
.clearfixCSS 到@layer utilities会失效——因为content-['']这类工具类默认不启用，需手动打开content变体 - 即使手写成功，伪元素仍要依赖
display: table或display: block，而这些在 Flex/Grid 主导的项目中毫无必要 - Tailwind 的 JIT 编译器不会为手写的
::after规则做优化，属于“非标准路径”，维护成本高
用 flex 或 grid 替代浮动才是正解
绝大多数你原本想用 .clearfix 的场景，其实只需要改一行父容器样式：
- 两栏并排？父容器加
flex，子项用flex-1或w-1/2 - 等宽卡片流？用
grid grid-cols-2 sm:grid-cols-3 gap-4 - 需要文字环绕图片？用
float-left+ml-4等间距类即可，无需清浮——因为此时父容器高度塌陷本就不是问题
真要模拟 .clearfix 怎么写（仅限兼容旧代码）
如果必须对接遗留 HTML 或第三方组件（比如某些 CMS 输出的浮动结构），可局部添加：
@layer utilities {
.clearfix::before,
.clearfix::after {
content: '';
display: table;
}
.clearfix::after {
clear: both;
}
}
然后在对应父容器上加 class="clearfix"。注意：
- 必须显式启用
content变体：在tailwind.config.js的content配置里加上'./src/**/*.css'或对应路径 - 不要全局加这个类——每个 div 都套
.clearfix会产生大量无意义伪元素节点 - 它和 Bootstrap 5 的行为一致，但不兼容 IE8/9，因为 Tailwind 本身已放弃对这些浏览器的支持
真正容易被忽略的点是：清除浮动从来不是目的，让父容器正确包裹内容才是。而这个目标，display: flow-root（原生 BFC）、flex、grid 都比 clearfix 更轻量、更可靠、更少副作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
