根本原因是SVG/canvas默认为行内级元素，基线对齐导致与浮动元素错位；推荐用块级容器包裹并清除浮动，或改用flex布局实现对齐。
浮动元素（float）和 SVG / canvas 并排时错位，根本原因是：SVG 和 canvas 默认是 行内级（inline-level）元素，其基线（baseline）对齐方式与文本一致，而浮动元素会脱离文档流、影响行高计算，导致视觉错位。
把 SVG/canvas 包进块级容器（推荐）
最稳妥的做法是让 SVG 或 canvas 不再参与行内布局：
- 用 等块级元素包裹 SVG/canvas
- 给包裹容器设置
display: block（默认就是）- 同时清除浮动影响，比如在容器后加
clear: both，或用 BFC 方式（如overflow: hidden）这样 SVG/canvas 就完全脱离行内上下文，和浮动元素互不干扰。
用 vertical-align 控制行内对齐（仅当必须行内）
如果 SVG/canvas 必须保持行内（比如嵌在文字中），且旁边有浮动元素造成基线偏移，可显式调整对齐：
立即学习“前端免费学习笔记（深入）”；
- 给 SVG/canvas 设置
vertical-align: middle、top或bottom - 避免用
vertical-align: baseline（默认值，易错位） - 注意：该属性只对行内级和表格单元格生效，对块级或浮动元素本身无效
例如：
改用 Flex 布局替代 float（现代首选）
浮动本就不是为复杂对齐设计的。直接放弃 float，用 flex 更干净：
- 给父容器设
display: flex - SVG/canvas 和相邻元素都变成 flex 项目，天然居中对齐
- 用
align-items: center垂直居中，gap控制间距
示例：
.container { display: flex; align-items: center; gap: 12px; }
文字内容
svg width="24" height="24">...
基本上就这些。优先用 flex 替代 float；必须兼容老浏览器时，块级包裹 + clear 是最稳解法。
- 给包裹容器设置
