vertical-align 对浮动元素无效，因其仅在行内格式化上下文中生效，而 float 元素脱离文档流、生成 bfc，退出 ifc；正确方案是改用 flex 布局或伪元素模拟 inline-block 垂直居中。
不能直接对浮动元素用 vertical-align 垂直居中——它会被浏览器完全忽略，不是兼容性问题，是 CSS 规范层面的无效操作。
为什么 vertical-align 对 float 元素不起作用
vertical-align 只在行内格式化上下文（IFC）中生效，作用对象限于 inline、inline-block、table-cell 元素；而 float 会让元素脱离文档流、生成新的 BFC，彻底退出 IFC。你给一个 float: left 的 div 设置 vertical-align: middle，浏览器连解析都不会解析这一条声明。
常见错误现象：
- 写了
vertical-align: middle却毫无反应 - 父容器高度塌陷，导致“看起来没对齐”，其实是容器根本没高度
- 误以为是字体大小或行高干扰，反复调
line-height白费功夫
用 ::before 伪类 + inline-block 模拟垂直居中
这是唯一能在保留部分浮动语义（比如旧项目不能动 HTML 结构）的前提下，绕过 float 限制实现视觉居中的方案。核心是：放弃对浮动子元素本身操作，转而在父容器内构造一个同级的、100% 高的参照物。
实操要点：
- 父容器必须有明确高度（
height或min-height），否则伪元素无法撑起行高 - 父容器设
font-size: 0消除inline-block间隙，子元素再重置font-size -
::before设为display: inline-block; height: 100%; vertical-align: middle; width: 0; - 需要居中的子元素也设为
display: inline-block; vertical-align: middle;，且不能带float
示例关键代码：
.container {
height: 80px;
font-size: 0;
}
.container::before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
width: 0;
}
.item {
display: inline-block;
vertical-align: middle;
font-size: 14px;
}
浮动 + vertical-align 混用时的典型陷阱
很多人试图把图标设 float: left，文字设 vertical-align: middle，结果文字“吊”在图标下方。这不是对齐失败，而是行框（line box）绕开浮动元素后，仍按 baseline 对齐造成的视觉错位。
容易踩的坑：
- 给浮动图标加
vertical-align—— 完全无效，浏览器静默丢弃 - 给非浮动文字加
vertical-align—— 文字是块级？不起作用；是 inline？但基线参照的是行框底部，不是图标中心 - 用
margin-top微调 —— 值依赖font-size和行高，换主题或缩放页面就偏移 - 伪类和浮动子元素共存于同一父容器 —— 若子元素自己用了
float，会破坏inline-block布局流，导致伪类参照失效
真正该做的：停用 float，改用 flex
如果你的目标是“图标与文本并排且垂直居中”，float 从一开始就不该出现。现代布局中，float 仅用于图文环绕场景，不是布局工具。
推荐做法：
- 父容器设
display: flex; align-items: center; - 图标和文字都作为直系子元素，无需任何
float或vertical-align - 若需兼容 IE11，注意：当父容器无显式高度且内容未撑开时，
align-items: center可能不生效，加min-height: 1em或继承父级高度 - SVG 图标统一用
height: 1em; width: 1em;，避免拉伸；移除width/height属性，靠viewBox保证等比缩放
复杂点往往藏在“必须兼容老项目”这个前提里——但更常被忽略的是：哪怕只改一行 display，也要同步清理所有残留的 float、clear、overflow: hidden，否则它们会在 flex 容器里引发不可预测的截断或塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
