float工具类不推荐使用，因其易致塌陷、错位等问题，现代布局应优先采用flex或grid；text-align仅作用于内联内容，对块级子元素无效，需配合inline-block等才能生效。
float 工具类在现代 CSS 中基本不推荐使用
直接说结论：float 类（如 float-left、float-right）在响应式布局中极易引发父容器塌陷、清除浮动遗漏、多列错位等问题，Bootstrap 5+ 和 Tailwind CSS 默认已移除或弃用 float 工具类。除非维护老项目或需兼容 IE10 及以下，否则应优先用 display: flex 或 display: grid 替代。
text-align 工具类只作用于内联内容和文本
text-align 类（如 text-left、text-center）仅影响元素内部的文本、inline 元素、inline-block 元素的水平对齐方式，**对块级子元素本身的位置无控制力**。常见误用场景：
- 给一个
div加text-center，却期望里面一个width: 200px的div居中 —— 不生效，因为子div是块级，不受text-align影响 - 用
text-right想把按钮右对齐，但按钮是block或未设display: inline-block—— 依然左贴边
真正起效的前提是：目标元素为 inline 级别，或显式设为 inline-block / inline-flex 等内联格式化上下文。
替代方案：用 flex 工具类精准控制对齐
现代工具类库（Tailwind、Bootstrap 5+）用 flex 相关类替代 float 和 text-align 的粗粒度控制，更可靠：
立即学习“前端免费学习笔记（深入）”；
-
justify-content控制主轴（默认横轴）对齐：justify-start/justify-center/justify-end/justify-between -
align-items控制交叉轴（默认竖轴）对齐：items-start/items-center/items-end - 需让单个子元素居中？父容器加
flex justify-center items-center，子元素无需额外样式 - 需右对齐按钮组？父容器用
flex justify-end gap-2，比float-right+clear-both干净得多
.container {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0.5rem;
}
float 类真要用时，必须配 clear 或 BFC 防塌陷
若因 legacy 代码或特定动画需求必须用 float-left，务必同步处理父容器高度塌陷问题：
- 最简方式：父容器加
overflow: hidden或overflow: auto（触发 BFC） - 语义更清方式：在浮动元素后加空元素并设
clear: both，如<div class="clear-both"></div>，对应 CSS：.clear-both { clear: both; } - Tailwind 用户注意：v3.0+ 已删除
clear-both，需自行定义或改用before:content-[''] before:table触发 BFC - 不要依赖
text-align“修复” float 布局 —— 它俩作用域完全不同，混用只会增加调试成本
浮动的本质是脱离文档流，而文本对齐是文档流内的排版规则；把它们当成同一类“对齐工具”来混搭，是很多布局 bug 的根源。
