vertical-align 对浮动元素无效，仅适用于行内级元素和表格单元格；替代方案是用 inline-block 配合 vertical-align 或直接使用 flex 实现垂直居中。
浮动元素本身不响应 vertical-align
这是最常被误解的一点：vertical-align 只对 行内级元素（包括 inline、inline-block、table-cell）和表格单元格生效，对 float: left 或 float: right 的块级元素完全无效。如果你给一个 div 设置了 float: left，再加 vertical-align: middle，浏览器会直接忽略它。
常见错误现象：
- 浮动的图标 + 文字，文字始终“吊”在顶部，调
vertical-align没反应 - 用
line-height强行撑高父容器，结果换行后文字错位或行高溢出
真正起效的替代方案：用 display: inline-block 替代浮动
想让块级内容与文本垂直对齐，更现代且可控的做法是放弃浮动，改用 inline-block 配合 vertical-align。它保留了块级元素的盒模型控制力，又支持行内对齐逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把浮动容器（如图标
div）改为display: inline-block，并显式设置vertical-align: middle - 确保父容器没有意外的空白字符（换行/空格），否则会引入看不见的间隙；可设
font-size: 0在父级，再在子元素里重置font-size - 如果需要居中对齐，
vertical-align: middle是基于父行框的基线+半x-height计算的，实际效果接近视觉居中，比top/bottom更可靠
示例：
.icon {
display: inline-block;
width: 24px;
height: 24px;
background: #007bff;
vertical-align: middle;
}
.text {
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
line-height 只适用于单行文本的“伪垂直居中”
line-height 能让单行文本在行框内垂直居中，但它不是对齐“块”，而是拉伸行框高度。一旦文本换行，或容器内有多个行内元素，line-height 就会失去预期效果，甚至导致上下间距异常。
使用场景限制明显：
- 仅限单行、无换行、无其他行内兄弟元素的纯文本
- 父容器必须是块级且高度固定，否则
line-height会撑高整个块 - 若同时存在浮动元素，
line-height作用于文本自身行框，与浮动元素无几何对齐关系——只是“看起来凑巧对齐”
现代推荐：用 flex 彻底绕过浮动和对齐陷阱
浮动本就不是为垂直对齐设计的。如果目标是图标+文字水平排列且垂直居中，display: flex 是目前最稳定、语义最清晰的解法。
关键点：
- 父容器设
display: flex; align-items: center;，自动对齐所有子项的交叉轴（即垂直方向） - 无需担心空白符、基线偏移、
line-height溢出等问题 - 兼容性已覆盖所有主流浏览器（IE10+ 需加
-ms-前缀，但基本可用）
浮动遗留代码迁移时，最容易被忽略的是：清除浮动（clear）逻辑在 flex 下完全失效，需一并移除。
