text-align对float元素无效，因其仅作用于行内格式化上下文（ifc）内的内容，而float元素脱离文档流、成为独立浮动框，不再参与父容器的行框排列；其水平位置由包含块和浮动方向决定，而非text-align控制。
text-align 为什么对 float 元素完全无效
因为 text-align 只作用于块级容器内的「行内格式化上下文」（IFC）中的内容，而 float 会让元素脱离文档流、脱离 IFC，变成独立的浮动框（floating box）。此时它既不是行内内容，也不再参与父容器的行框排列，text-align 根本“看不见”它。
常见错误现象：
- 给父容器设
text-align: center，子元素设float: left，结果子元素依然靠左贴边 - 多个
float: left的<li>并排，想用text-align: justify拉齐两端，毫无反应 - 浮动图片 + 旁边文字，文字对齐正常，但图片位置不受
text-align影响
float 元素的对齐到底由谁控制
浮动元素自身的水平位置，取决于它在**包含块（containing block）** 中的浮动方向和可用空间，而不是父容器的 text-align 值。它的对齐逻辑是：先找到最近的、有宽度限制的非浮动块级祖先（通常是 <div> 或 <code>），然后按 float: left/right 贴边，剩余空间由后续内容环绕。
换句话说：
-
text-align控制的是“文字怎么排”，不是“盒子怎么摆” - 浮动元素已经不是“被排的文字”，而是“主动抢占位置的盒子”
- 如果真想让浮动元素整体居中，得靠
margin: 0 auto（需同时设明确width）或包裹一层display: inline-block容器再配text-align: center
inline-block + vertical-align 是最轻量的替代方案
如果你只是想让多个块级项水平排列并受父容器对齐控制，display: inline-block 是比 float 更干净的选择——它不脱离流、父容器能正常撑高、且真正响应 text-align。
关键点：
- 必须显式写
vertical-align: top或bottom，否则默认baseline会因字体大小/行高差异导致错位 - 父容器若有换行或空格，会在
inline-block项之间生成约4px间隙，可用font-size: 0消除 -
inline-block在 IE8+ 全支持，比flex兼容性更好，适合需要保底的项目
现代布局应优先用 flex，而非硬套 float + text-align
试图用 float 配合 text-align 实现居中、两端对齐或响应式分布，本质是在对抗 CSS 的自然行为。真正该做的是切换到语义清晰、控制直接的布局模型。
比如让一组卡片底部对齐：
- 错误做法：每个卡片
float: left+ 父容器text-align: center→ 无效 - 正确做法：父容器
display: flex+align-items: flex-end→ 直接生效 - 注意：
justify-content控制主轴（默认水平），align-items才管交叉轴（默认垂直）
浮动布局遗留的清除问题、高度塌陷、基线错位、响应式断裂……这些都不是 text-align 能修的，而是该淘汰 float 本身。
