vertical-align 对浮动元素完全无效，因其脱离普通流变为块级框，仅对行内级元素和表格单元格生效；替代方案是用 inline-block + vertical-align，或通过 padding、line-height、伪元素、flex 等方式模拟对齐。
vertical-align 对浮动元素完全无效
vertical-align 只对 行内级元素（display: inline、inline-block、inline-table）以及表格单元格（td、th）生效。一旦元素设置了 float: left 或 float: right，它就脱离了普通流，变成块级框（即使原本是 span），此时 vertical-align 被忽略——浏览器根本不读这个声明。
常见错误现象：
- 给
<img alt="CSS浮动元素与文本对齐_vertical-align是否对浮动生效" >加了float: left后再设vertical-align: middle，图片依然和文字基线对不齐 - 用
float做图文混排时，文字“卡”在浮动元素下方或顶部，调vertical-align没反应
替代方案：用 display: inline-block + vertical-align
如果目标是让图片/图标与文字垂直居中对齐，且需要左右排列，优先放弃 float，改用 inline-block。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把浮动元素的
float改为display: inline-block - 确保父容器没有
white-space: nowrap等干扰换行的设置 - 给该元素加
vertical-align: middle（或top、bottom） - 注意：
inline-block元素间默认有空白符间隙，可用font-size: 0或注释消除
示例：
<div class="wrap"> <img src="icon.png" style="max-width:90%" alt="CSS浮动元素与文本对齐_vertical-align是否对浮动生效" > <span style="display: inline-block; vertical-align: middle;">文字内容</span> </div>
真要保留浮动？靠父容器或伪元素微调
若因历史代码或布局限制必须用 float，vertical-align 就不能指望了。只能通过其他方式“模拟”对齐效果。
常用手段：
- 给浮动元素的兄弟文字容器（如
p或span）加padding-top/line-height手动推位置 - 用
::before或::after在浮动元素同级插入占位伪元素，控制高度对齐 - 把整个结构包进
display: flex容器（但这就绕开浮动了） - 注意：
margin-top对浮动元素本身有效，但只影响它自身位置，不改变与邻近文本行的相对垂直关系
为什么老教程还在提 vertical-align 配浮动？
这是早期 CSS 实践中的一个典型误传。2000 年代初部分浏览器（如 IE6）对 float 和 vertical-align 的组合行为存在非标准解析，导致有人观察到“似乎生效”，但那不是规范行为，也不可复现于现代浏览器。
关键点：
- 所有主流浏览器（Chrome、Firefox、Safari、Edge）当前版本均严格遵循规范：浮动元素不参与行盒布局，
vertical-align无意义 - 检查 computed styles 会发现，浮动元素的
vertical-align值始终显示为baseline（初始值），且不触发任何渲染变化 - 真正影响浮动元素与文字相对位置的，是它的
height、margin、line-height（对父容器）以及清除浮动的方式
别在浮动元素上浪费时间调 vertical-align，它不会动。
