vertical-align 对浮动元素完全无效，因其仅作用于 inline、inline-block 和 table-cell 元素；浮动元素脱离文档流成为块级框，失去 vertical-align 作用域。
vertical-align 在浮动元素上为什么完全没用
vertical-align 只对 inline、inline-block、table-cell 元素生效，而 float 会让元素脱离常规文档流并变成块级框（block-level box），此时 vertical-align 直接被忽略——不是“效果不好”，是根本不起作用。
常见错误现象：div 设了 float: left，再加 vertical-align: middle，页面毫无反应；或者和 img 并排时，文字始终贴底，调 vertical-align 也没变化。
- 使用场景：老项目还在用
float做多栏布局，同时需要让图标、按钮、文字在行内垂直居中 - 根本原因：浮动元素不参与 inline formatting context，
vertical-align失去作用域 - 别浪费时间调试这个组合——它注定无效
用 display: table-cell 替代 float 实现垂直对齐
如果必须保持“视觉上浮动并排”的效果，又需要垂直居中，display: table-cell 是最直接的兼容性方案（IE8+ 支持）。
原理是模拟表格单元格行为，vertical-align 在这里完全可用。
- 把父容器设为
display: table，宽度需明确（如width: 100%） - 子元素设为
display: table-cell，去掉float - 对子元素单独设置
vertical-align: middle即可生效 - 注意：
table-cell默认等宽分配空间，用width或white-space: nowrap控制宽度更可靠
.container { display: table; width: 100%; }
.left { display: table-cell; width: 200px; vertical-align: middle; }
.right { display: table-cell; vertical-align: middle; }
更现代但需放弃 float 的替代方案
如果项目支持 IE11+，优先用 flexbox；若需兼容老版本且不想碰 table，inline-block + vertical-align 是唯一仍能用上 vertical-align 的路径。
-
flexbox：父容器display: flex，子项用align-items: center，彻底绕过浮动和行内对齐限制 -
inline-block：子元素设display: inline-block+vertical-align: middle，父容器清除换行符或设font-size: 0防空白间隙 - 性能影响：
flex渲染开销略高于table-cell，但现代浏览器优化充分，差异可忽略 - 兼容性坑：
inline-block在 IE7/8 需加zoom: 1触发 hasLayout
浮动未清除导致的“伪垂直错位”问题
有时候你以为是垂直对齐失败，其实是浮动未清除引发父容器高度塌陷，造成后续元素位置错乱，看起来像“没对齐”。
- 典型表现：浮动元素下方的段落紧贴顶部，或背景色没包住内容
- 检查是否漏了
clear: both或伪元素清除（::after { content: ""; display: table; clear: both; }） - 这个错误常被误判为
vertical-align问题，先确认布局结构是否完整再调样式 - 工具建议：用浏览器开发者工具的“Layout”面板看盒模型，比肉眼判断更准
真正麻烦的不是怎么对齐，而是得先分清：是样式没生效，还是结构已经歪了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
