Tailwind v3.0 起彻底移除 clearfix，因现代布局（flex/grid/flow-root）天然解决浮动塌陷；推荐用 flow-root 触发 BFC 替代，兼容性好且无伪元素干扰。
为什么 clearfix 在 Tailwind 中根本不存在
Tailwind CSS 从 v3.0 开始彻底移除了 clearfix 类——它不是被“隐藏”了，而是被设计上放弃了。原因很直接：现代布局（flex、grid、display: flow-root）天然规避浮动塌陷，强行保留 clearfix 反而鼓励过时写法。
如果你在项目里搜 @apply clearfix 或期望用 class="clearfix" 解决父容器高度塌陷，那第一步就得停手：这不是配置没开，是这条路本身已废弃。
浮动还没删干净？用 flow-root 替代 clearfix
当必须保留 float（比如老代码、特定图文环绕场景），最轻量且兼容性够用的解法是让父容器触发 BFC，而不是拼 ::after 伪元素。
-
flow-root是 CSS 原生属性，Tailwind 默认提供flow-root工具类（v3+） - 比传统
clearfix更可靠：不依赖伪元素、不干扰 margin collapse、无额外 DOM 节点 - 兼容性足够：Chrome 58+、Firefox 55+、Safari 10.1+、Edge 79+
示例：
<div class="flow-root"> @@##@@ <p>这段文字会正常环绕，且父 div 高度不会塌陷</p> </div>
遇到 float + margin-top 失效？检查父容器是否 BFC 化
浮动元素的 margin-top 在某些情况下会“穿透”到父容器外，表面看是浮动问题，实则是父容器未形成 BFC 导致 margin 传递。
- 仅加
flow-root不一定够——如果父容器本身有display: inline-block或position: absolute，BFC 触发逻辑会变化 - 优先确认父容器计算后的
display值是否为flow-root（DevTools 中查看 Computed 样式） - 若需兼容 IE，
overflow: hidden仍可临时用，但注意会裁剪position: absolute子元素
真要手写 clearfix？别用网上抄的旧版代码
如果你维护的是遗留项目，且必须注入自定义 clearfix，请避开两种常见错误写法：
- 用
content: "."+visibility: hidden：IE6/7 兼容但语义混乱，现代浏览器中可能触发不必要的重排 - 漏写
clear: both或写成clear: left：无法清除右浮动，导致塌陷依旧
最小可用版本（仅当真需要）：
.my-clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 block 更稳妥，避免某些安卓 WebView 的渲染异常。
浮动不是洪水猛兽，但硬套旧方案解决新问题，往往让塌陷变成嵌套塌陷。真正该花时间的，是把 float 替换为 flex 或 grid 的那一小段重构——它比调试十次 clearfix 更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
