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">
<img src="..." class="float-left" alt="Tailwind CSS如何快速清除浮动_使用clearfix类解决CSS布局塌陷" >
<p>这段文字会正常环绕，且父 div 高度不会塌陷</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img
src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a>
<p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p>
</div>
<a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</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 更省时间。
