text-align 对浮动元素无效且导致兄弟元素文本视觉偏移，根本原因是浮动使元素脱离文档流、破坏行框连续性；修复应优先用 flex 布局或触发 bfc，而非强行调整 text-align。
text-align 对兄弟元素的文本“看起来没对齐”，不是它失效了，而是浮动触发了文字环绕，破坏了行框连续性——根本问题不在 text-align 本身，而在文档流断裂。
text-align 为什么对浮动元素自身无效
因为 text-align 只在块级格式化上下文（BFC）内、针对行内格式化上下文（IFC）中的行框起作用。一旦元素设了 float: left 或 float: right，它就变成浮动框（floating box），脱离标准文档流，不再参与父容器的 IFC 构建。
- 给浮动的
<p></p>同时加float: right和text-align: justify→text-align被完全忽略 - 真正控制该段落内部文字对齐的，是它的包含块（通常是
或最近的非浮动祖先），而那个块往往没设text-align，所以回退到默认左对齐（LTR） - 这不是浏览器 bug，是 CSS 规范明确定义的行为
为什么兄弟元素的文字“视觉上偏移”
这不是 text-align 失效，而是浮动元素引发的文字环绕行为导致行框被切割、基线错乱。典型表现包括：
- 文字从浮动元素右侧开始换行，但首行缩进或
line-height不一致，造成视觉偏移 - 浮动元素高度 > 行高时，后续文字行的 baseline 被抬高或压低
- 父容器未清除浮动，高度塌陷，下方同级块元素上浮，文字区域被压缩或重叠
- 即使父容器设了
text-align: center，浮动子项仍靠边，且旁边文字不会“跟着居中”，因为它们已不在同一行框内
如何快速判断和修复对齐异常
先确认是不是浮动引起的——临时删掉 float，看文字是否立刻恢复预期对齐。如果是，说明问题根源明确。修复不等于硬调 text-align，而要分层处理：
- 若目标是图文并排+文字垂直居中：放弃
float，改用display: flex+align-items: center，一行代码解决 - 若必须保留浮动（如老项目兼容）：给文字容器加
overflow: hidden（触发 BFC），可阻止文字绕到浮动元素下方，强制另起一行对齐 - 若浮动元素高度不一导致基线错乱：统一用
padding-bottom拉齐底部文字位置，并确保box-sizing: border-box - 永远别指望
vertical-align对浮动元素起效——它只作用于行内级元素和表格单元格
最容易被忽略的一点：浮动元素的垂直对齐基准是它的 margin box 顶部，而不是内容区；而兄弟文字的 baseline 是按行框计算的——两者参照系不同，强行对齐只会越来越乱。真正该做的，是让它们回到同一个格式化上下文中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
