vertical-align 对浮动元素自身无效，仅作用于其内部的行内子元素；单行文本垂直居中用 line-height，多行则需 flex 或 table-cell 方案。
float 元素内部文本默认对齐行为
浮动元素（float: left 或 float: right）本身是块级框，但其内部文本仍按行内流排布，vertical-align 对它**完全无效**——因为 vertical-align 只作用于行内级元素（如 span、img）或表格单元格，不适用于浮动容器自身。
想让浮动盒子内的文字垂直居中？别用 vertical-align
常见误区是给浮动的 div 设置 vertical-align: middle，这不会产生任何效果。真正可行的方案取决于内容类型：
- 单行文本：用
line-height等于容器高度（需固定高） - 多行文本或不确定高度：改用
display: flex+align-items: center（注意：flex 与 float 冲突，必须移除float） - 若必须保留 float（如老项目兼容），可用伪元素 +
vertical-align: middle搭配实现“模拟居中”，但仅适用于单行且需额外 DOM 干预
float 和 vertical-align 同时出现时的真实作用对象
当浮动元素内包含 img 或 span 这类行内元素时，vertical-align 才起作用——它调整的是这些**子元素在行框内的基线位置**，而非整个浮动容器。例如：
<div style="float: left"> @@##@@ <span>文字</span> </div>
这里 vertical-align: middle 让图片和后续 span 在同一行内垂直对齐，但整个 div 的顶部仍由浮动规则决定，不受该属性影响。
立即学习“前端免费学习笔记（深入）”；
兼容性与现代替代建议
float 布局本就不是为文本对齐设计的；强行混用 float 和 vertical-align 容易导致不可预测的换行、间隙或截断。如果目标是图文并排+文字居中：
- 优先用
display: flex替代float，直接控制主轴/交叉轴对齐 - 若需 IE8–9 支持，用
display: table-cell+vertical-align: middle（容器设display: table） - 纯文本居中场景下，
float往往是过度设计——考虑是否真需要脱离文档流
最常被忽略的一点：float 会触发 BFC，但也会让父容器塌陷；而 vertical-align 的生效前提常被误认为是“有高度”，其实是“在行框内”——这个行框可能被浮动破坏，导致对齐失效。
