vertical-align生效前提是元素必须为inline、inline-block或table-cell，且参与行框构建；浮动或绝对定位元素脱离文档流、不属行框，故该属性无效。
vertical-align 对 float 元素完全无效，这不是写法错误，而是 CSS 规范层面的硬性限制。
vertical-align 的生效前提是什么？
它只作用于三类元素：inline、inline-block 和 table-cell。这些元素必须参与行框（line box）的构建，才能有“基线”可对齐。而 float: left 或 float: right 会让元素脱离常规文档流，生成独立的块级框（BFC），不再属于任何行框——没有行框，就没有基线，vertical-align 自然无从下手。
常见错误现象包括：
-
.icon { float: left; vertical-align: middle; }—— 样式存在但开发者工具里不生效，也不报错 - 给父容器设
line-height: 60px，文字行高撑开了，浮动图标却纹丝不动 - 用
margin-top硬推，结果后续浮动元素换行或错位
为什么 inline-block + vertical-align 是更可行的替代路径？
这不是“修复 float”，而是放弃 float，改用行为可控的行内级布局模型。关键点在于让所有相关元素处于同一行框中，并统一控制对齐基准。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 移除所有
float声明，改用display: inline-block - 父容器加
font-size: 0消除inline-block默认间距（约 4px） - 子元素显式设置
font-size恢复文本大小 - 所有需对齐的子元素都加
vertical-align: middle，否则参考系不一致
示例结构：
.wrapper { font-size: 0; height: 48px; }
.icon { display: inline-block; vertical-align: middle; width: 24px; height: 24px; font-size: 14px; }
.text { display: inline-block; vertical-align: middle; font-size: 14px; }
Flexbox 为何是现代场景下的首选解法？
它彻底绕开行框和基线计算，直接在容器维度定义交叉轴对齐逻辑。只要父容器设 display: flex 和 align-items: center，子元素无论内容类型、尺寸差异或换行与否，都能稳定垂直居中。
注意两个容易被忽略的细节：
- 父容器必须有明确高度（
height或min-height），否则align-items: center缺少参照基准 - Flex 容器内的子元素一旦成为 flex item，
float、clear、vertical-align全部被浏览器强制忽略（计算值为none），DevTools 中会显示删除线
响应式环境下 vertical-align 更不可靠的根源
它的对齐点依赖动态变化的行框：font-size 缩放 → 行高缩放 → 基线偏移 → middle 实际位置漂移。移动端字号变小后图标突然“上浮”，横屏时多列 inline-block 底部参差，都是这个机制导致的。
如果目标是图文并排且追求稳定，vertical-align: text-bottom 比 middle 更可靠——它对齐的是字体 em-box 的底边，与行高无关；如果涉及多行、堆叠或复杂分段，则必须切换到 Flex 或 Grid，vertical-align 不是工具，是障碍。
