Tailwind CSS 不提供 .clearfix 类，因不鼓励浮动布局；用 overflow-hidden 仅掩盖塌陷而非真正清除，易裁剪绝对定位元素、影响滚动；推荐改用 flex、grid 或 flow-root 等现代布局方案。
Tailwind CSS 本身不提供 .clearfix 类，也不鼓励用浮动布局——所以“快速实现清除浮动”这个需求，本质上是个信号：该换布局方式了。
为什么直接加 overflow-hidden 看似快，但常出问题
给父容器加 overflow-hidden 确实能触发 BFC、让容器包裹浮动子元素，但它不是“清除浮动”，只是“掩盖塌陷”。
- 下拉菜单、Tooltip、Popover 这类绝对定位内容会被裁剪消失
- 设置了
transform或position: absolute的子元素可能被意外截断 - 滚动区域（比如长列表）无法正常溢出滚动，
overflow-auto在 iOS Safari 上还容易卡顿 - 它不解决根本问题：浮动元素仍脱离文档流，后续调试时容易误判高度来源
真要手写 .clearfix，必须配 content 变体
Tailwind v3.0+ 默认禁用所有含 content 的工具类。如果你必须兼容旧 HTML（比如富文本编辑器输出的 float-left 标签），得手动启用：
- 在
tailwind.config.js的content数组里，加入你自定义工具类所在文件路径 - 在
@layer utilities中写：@layer utilities { .clearfix::before, .clearfix::after { content: ""; } .clearfix::after { display: table; clear: both; } } -
content: ""不能写成content: none或空格，否则伪元素不渲染
更推荐的替代方案：两行 Tailwind 搞定原需求
绝大多数所谓“需要清浮”的场景，其实只需要改掉布局逻辑：
立即学习“前端免费学习笔记（深入）”；
- 横向排列几个块？用
flex flex-wrap gap-2，不用float-left+clearfix - 左右分栏？用
grid grid-cols-1 md:grid-cols-2，响应式天然支持 - 图文环绕？优先考虑
shape-outside+me-4（即margin-inline-end），比 float 更可控 - 如果已有浮动代码，别只改
float: none—— 必须同步重设width、统一box-sizing: border-box、并给父容器加flow-root（比overflow-hidden安全）
真正容易被忽略的点是：float 工具类（如 float-left）在 Tailwind 里依然存在，但它不是“可用”，而是“兼容遗留”。一旦你写了 float-left，就要立刻问自己：这个布局用 flex 或 grid 表达，是不是更直白、更少副作用、更容易维护？
