text-align 对浮动元素无效，因其仅作用于行内内容和非浮动块级子元素；浮动元素已脱离文档流和行盒，故无法被 text-align 控制对齐。
float 会让元素脱离文档流，text-align 对它无效
很多人以为给父容器加 text-align: center 就能让浮动子元素居中，结果完全没反应。这是因为 float 会把元素“拎出”正常流，text-align 只作用于**行内内容和非浮动块级子元素**，对已浮动的元素不产生对齐效果。
常见错误现象：
.container {
text-align: center;
}
.container .box {
float: left;
width: 100px;
height: 100px;
background: #ccc;
}——.box 依然靠左贴边，不会居中。
text-align 的实际作用对象是父容器里的「文本内容」和「未浮动的行内级元素」
如果你在浮动元素旁边放一段文字，或者插入一个 ，那么 text-align 才会影响那段文字的对齐位置。它不是用来控制浮动布局的工具。
-
text-align管的是父容器的「行盒（line box）」内部对齐 - 浮动元素已脱离行盒，自然不受影响
- 想让多个浮动元素整体居中？得靠包裹容器 + 宽度 +
margin: 0 auto，而不是text-align
float + text-align 的唯一合理配合场景
只有一种情况它们会协同工作：父容器内**同时存在浮动元素和普通文本内容**，你需要文本相对于容器对齐，而浮动元素用于图文环绕（比如新闻正文里图片左浮、文字绕排）。
这时：
.article {
text-align: justify; /* 控制段落文字对齐 */
}
.article img {
float: left;
margin-right: 12px;
}——float: left 让图片左贴边并让文字环绕；text-align: justify 则控制剩余文字的排版对齐方式。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 两者服务对象不同：
float处理元素定位与环绕，text-align处理文本内容对齐 - 不能用
text-align“修正”浮动导致的布局错位 - 现代开发中，图文环绕更推荐用
shape-outside或 Flex/Grid 替代 float
替代 float 实现居中对齐的更可靠方案
如果目标是让几个块级元素水平排列并整体居中，float 本身就不适合，强行用会引入清除浮动、高度塌陷等一堆问题。
推荐做法：
- 多列并排 + 居中 → 用
display: flex+justify-content: center - 单个块居中 →
margin: 0 auto（需设宽度）或flex/grid - 响应式多栏 →
display: grid配合auto-fit和minmax() - 仍要兼容老浏览器？可用
inline-block+text-align: center在父容器上，子元素设vertical-align: top
浮动的本质是为图文混排设计的，不是布局工具。现在还依赖它做整体对齐，等于在用打字机排网页。容易被忽略的是：一旦用了 float，后续所有兄弟元素的布局行为都会受其影响，而这种影响常常是隐式的、难调试的。
