SVG在浮动容器中错位的根本原因是其inline默认行为参与行框计算并按baseline对齐，而浮动破坏了行框结构；解决根法是改用flex布局，设display: flex、align-items: center及明确高度，并清除vertical-align和float等冲突样式。
SVG在浮动容器里错位，是因为它还在走inline基线对齐
浮动本身不直接导致SVG错位，真正的问题是：SVG默认是inline元素，会参与父容器的行框（line box）计算，并按baseline对齐。而浮动元素脱离文档流后，行框高度、基线位置可能被文字或其它行内内容扭曲，SVG就跟着“漂”了。
常见现象包括：SVG比旁边文字高一截、底部多出2–4px空白、和相邻浮动图片上下不齐——这些都不是SVG渲染错了，是它被塞进了一个逻辑混乱的行内上下文里。
vertical-align: middle为什么有时也不起作用
vertical-align只对inline、inline-block和table-cell生效，但浮动容器内的布局环境容易让它失效：
- 父容器用了
float，但没设line-height或字体度量不明确，middle找不到参照中线 - SVG和文字混排时，文字的
descender（如g、y下延部分）拉低了整行基线，SVG却没这部分结构，vertical-align: middle算出来的“中线”其实偏上 - 给SVG加了
float之后再设vertical-align，完全无效——float元素不参与行内对齐
这时强行加vertical-align: top或vertical-align: bottom反而更可控，但只是临时补救。
立即学习“前端免费学习笔记（深入）”；
用flex替代浮动才是根治方案
浮动布局本就不适合精确对齐图标这类需求。把SVG和文字一起包进一个flex容器，能彻底绕过基线干扰：
- 给父容器设
display: flex和align-items: center，SVG和文字就按几何中心对齐，不再看字体度量 - 必须同时写
justify-content: center，否则SVG可能贴左；父容器还得有明确高度（比如min-height: 40px），否则align-items无轴可依 - SVG自身要显式设
display: inline-block（别用block，否则换行），并声明viewBox="0 0 16 16"和width/height - 删掉所有
vertical-align和float相关样式——它们和flex冲突，还掩盖真实问题
IE11和旧版Safari的兼容陷阱不能忽略
即使flex写对了，在IE11里align-items: center会静默降级为flex-start，图标全堆左上角；iOS 15.4之前Safari可能忽略max-width: 100%，SVG卡在原始尺寸。
- IE11必须写双前缀：
display: -ms-flexbox+-ms-flex-align: center，光写display: flex没用 - Safari兼容需给SVG外层wrapper加
min-width: 0，强制它参与flex计算 - 避免用
gap控制图标间距——IE11不支持，改用margin-inline-end: 6px
最易被忽略的是：对齐问题从来不是SVG单方面的事，而是从最外层容器的font-size、line-height、是否清除浮动，一层层传导下来的。调试时先看computed样式里display是不是真变成了-ms-flexbox或flex，而不是只信源码写了。
