text-align 对 float 元素无效是规范行为，因浮动元素脱离行内格式化上下文（ifc）；正确做法是用 flex、grid 或 inline-block 替代 float，且清除浮动前提不可少。
text-align 对 float 元素完全无效，这不是 bug，而是规范行为——浮动元素已脱离行内格式化上下文（IFC），父容器的 text-align 根本“看不见”它。
为什么 float 元素不响应父容器的 text-align
text-align 只作用于块级容器内部的「行内格式化上下文」（IFC）中的内容，比如文字、<span></span>、display: inline-block 元素。而 float: left 或 float: right 会让元素变成独立浮动框（floating box），脱离文档流，也不再参与父容器的行框构建。
常见现象包括：
- 父容器设
text-align: center，子元素设float: left→ 子元素仍靠左贴边 - 多个
float: left元素并排，父容器设text-align: justify→ 完全无反应 - 浮动图片旁放段落文字 → 文字对齐正常，但图片位置不受
text-align影响
想让浮动元素“看起来居中”，得绕开 text-align
既然 text-align 不起作用，就得用真正控制盒子位置的属性。关键前提是：浮动元素必须有明确宽度，否则连居中计算都无从谈起。
可行做法有：
- 给浮动元素加
margin: 0 auto（需同时设置width，且父容器不能是inline或浮动） - 在外层包一层
display: inline-block容器，再对这个容器设text-align: center，内部浮动元素就能被“托”到中间 - 用
position: absolute+left: 50%+transform: translateX(-50%)，但要求父容器有position: relative
注意：margin: 0 auto 在浮动元素上生效的前提是它没脱离包含块的水平约束——如果父容器本身也浮动或 display: inline，该写法会失效。
更推荐的做法：别用 float 控制对齐
float 的设计目标从来就不是布局对齐，而是文字环绕。用它做多列、居中、两端对齐，本质是误用，后续必然遇到高度塌陷、最后一行错位、vertical-align 失效等问题。
现代替代方案简单直接：
- 整体布局用
display: flex：父容器设display: flex+justify-content: center，子元素去掉float即可居中 - 图文并排用
display: inline-block+vertical-align: middle：保留文档流，响应text-align，兼容性好（IE8+） - 需要复杂网格时直接上
display: grid，无需清除浮动、无塌陷风险
旧项目若必须兼容 IE8，inline-block 是比 float 更干净的选择；其他情况，flex 应该是默认首选。
清除浮动是所有对齐操作的前提
哪怕你用 margin: 0 auto 或伪元素强行居中，如果父容器因浮动塌陷（height = 0），背景、边框、后续元素都会错乱——这时候“对齐”只是视觉幻觉。
必须先确保父容器能正确包裹浮动子项：
- 首选
display: flow-root（现代浏览器全覆盖，无副作用） - 次选伪元素清除：
.parent::after { content: ""; display: table; clear: both; } - 避免
overflow: hidden，可能意外裁剪position: absolute子元素
没这一步，任何对齐尝试都是在沙上筑塔——表面看着对了，一刷新或一缩放就崩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
