text-align对浮动元素无效，因其仅作用于行内格式化上下文（ifc）内的行内内容，而float使元素脱离文档流、成为独立浮动框，不再参与父容器的行框构建；同级非浮动元素文字“未对齐”实为文字环绕导致行框切割与基线错乱。
浮动元素不影响同级元素的 text-align，但会干扰其文本的视觉对齐效果——根本原因是文字环绕机制与文档流错位共同作用的结果。
text-align 为什么对浮动元素本身无效
text-align 只在行内格式化上下文（IFC）中生效，它控制的是「行框内行内级内容的水平对齐」。而 float 让元素脱离标准文档流、成为独立浮动框（floating box），不再参与父容器的行框构建。所以：
- 给父容器设
text-align: center，子元素设float: left→ 子元素依然靠左贴边 - 多个
float: left元素并排，父容器设text-align: justify→ 完全无反应 - 浮动图片 + 旁边段落文字 → 段落文字对齐正常，但图片位置完全不受
text-align控制
为什么同级非浮动元素的文字看起来“没对齐”
这不是 text-align 失效，而是浮动元素触发了文字环绕行为，导致行框被切割、基线错乱。典型现象包括：
- 文字从浮动元素右侧开始换行，但首行缩进或行高不一致，造成视觉偏移
- 浮动元素高度 > 行高时，后续文字行的 baseline 被抬高或压低
- 父容器未清除浮动，高度塌陷，导致下方同级块元素上浮，文字区域被压缩或重叠
此时调整 line-height 或给文字容器加 margin-top 常能缓解，但本质是治标——因为浮动本就不该用于控制文字对齐。
真正该用什么替代 float 来控制文字对齐
如果你的目标是让图文并排且文字垂直居中、水平对齐可控，float 是错误工具：
- 优先用
display: flex：父容器设display: flex; align-items: center;，文字和图片自动对齐，无需计算line-height - 次选
display: inline-block+vertical-align: top：保留文档流，响应text-align，兼容性比 flex 更广（IE8+） - 避免用
float配合text-align-last或伪元素强行拉齐——该属性在 Safari 有长期 bug，且仅对最后一行生效，不可靠
老项目里必须修 float 引起的对齐问题怎么办
若无法替换布局模型，只做最小修复：
- 确保浮动元素有明确
width和box-sizing: border-box，避免因 padding/border 导致宽度溢出 - 用
::after伪元素清除浮动，防止父容器塌陷影响下方同级元素位置 - 文字容器加
overflow: hidden（触发 BFC）可阻止文字绕到浮动元素下方，强制另起一行对齐
最常被忽略的一点：浮动元素的垂直对齐基准是它的 margin box 顶部，而非内容区；而文字的 baseline 对齐依赖行高和字体度量——这两套系统天生不兼容，硬调只会越来越难维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
