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 CSS 3.4.19

Tailwind CSS 3.4.19 是 v3 长期维护分支版本，适合仍使用 v3 配置和构建流程的项目。此页提供 npm 官方包。

下载

• 在 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 表达，是不是更直白、更少副作用、更容易维护？

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！