根本原因是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（默认值，易错位）
• 注意：该属性只对行内级和表格单元格生效，对块级或浮动元素本身无效

例如：


CSS工具箱(专业版)
全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。
下载

改用 Flex 布局替代 float（现代首选）

浮动本就不是为复杂对齐设计的。直接放弃 float，用 flex 更干净：

• 给父容器设 display: flex
• SVG/canvas 和相邻元素都变成 flex 项目，天然居中对齐
• 用 align-items: center 垂直居中，gap 控制间距

示例：

.container { display: flex; align-items: center; gap: 12px; }


 
文字内容

 


基本上就这些。优先用 flex 替代 float；必须兼容老浏览器时，块级包裹 + clear 是最稳解法。