应谨慎封装 float 工具类，因其专为文字环绕设计，用于布局易致脱标、塌陷等问题；现代应优先用 flex/grid，确需封装时仅提供 float-left/float-right 基础声明，禁用 clear 类及混用。
为什么直接封装 float 工具类要谨慎
现代 CSS 布局中，float 已不再是排版主力——它本就为文字环绕图片设计，强行用于布局会带来脱标、父容器塌陷、兄弟元素错位等连锁问题。原子化工具类追求的是「可预测、可组合、低副作用」，而 float: left 单独使用时，几乎必然需要配套 clear 或额外 wrapper，这违背了高内聚原则。
如果你真在维护老项目或必须兼容 IE8–9，才考虑封装；否则优先用 flex 或 grid 工具类（如 flex-row、grid-cols-3）替代。
float-left / float-right 的最小安全封装方式
若确需提供浮动工具类，只封装最基础的声明，不带任何隐含行为：
-
float-left→float: left，仅此一行，不加width、不设margin -
float-right→float: right，同理 - 禁用
float-none以外的其他值（如float-inline-start），避免混淆 - 绝不提供
clear-both类作为“配套”——清除浮动应由使用者按上下文决定，比如用overflow-hidden父容器，或伪元素::after，而非绑定到工具类上
浮动工具类和 Flex 工具类混用时的典型冲突
常见错误是把 float-left 和 flex 类写在同一元素上：
立即学习“前端免费学习笔记（深入）”；
<div class="float-left flex items-center">...</div>
此时 float 会让元素脱标，flex 在父容器中失效，结果不可控。正确做法是：
- 用
float就只用float，且确保父容器有明确高度或清除机制 - 用
flex就彻底放弃float，改用justify-content、align-self等控制位置 - 如果想实现「左图右文」这种经典浮动效果，直接用
flex-row+gap-4+items-start，语义更清、行为更稳
真正高内聚的替代方案：用 shrink-0 控制弹性收缩
很多人想用 float-left 是为了“固定某块不随容器缩放”，其实 shrink-0（即 flex-shrink: 0）才是更精准、更现代的解法：
- 它只作用于 Flex 容器子项，无脱标副作用
- 配合
flex、w-full、max-w-xs等工具类，能自然实现「固定宽度内容 + 自适应文本」布局 - 例如头像+文字组合：
<div class="flex"> <img class="shrink-0 w-10 h-10" alt="怎样编写高内聚的CSS浮动排版原子化工具类" ><div class="ml-3">...</div> </div>
浮动工具类容易写得“看起来能用”，但一旦嵌套、响应式或与其他布局混合，就会暴露耦合松散、行为不可推演的问题。高内聚不是指类名短，而是指一个类只做一件事，且这件事在任意上下文中都表现一致——shrink-0 比 float-left 更接近这个标准。
