根本原因是SVG/canvas默认为行内级元素，基线对齐导致与浮动元素错位；推荐用块级容器包裹并清除浮动，或改用flex布局实现对齐。

浮动元素（float）和 SVG / canvas 并排时错位，根本原因是：SVG 和 canvas 默认是 行内级（inline-level）元素，其基线（baseline）对齐方式与文本一致，而浮动元素会脱离文档流、影响行高计算，导致视觉错位。

把 SVG/canvas 包进块级容器（推荐）

最稳妥的做法是让 SVG 或 canvas 不再参与行内布局：

• 用 <div> 等块级元素包裹 SVG/canvas <li>给包裹容器设置 <code>display: block（默认就是）
• 同时清除浮动影响，比如在容器后加 clear: both，或用 BFC 方式（如 overflow: hidden）

这样 SVG/canvas 就完全脱离行内上下文，和浮动元素互不干扰。

用 vertical-align 控制行内对齐（仅当必须行内）

如果 SVG/canvas 必须保持行内（比如嵌在文字中），且旁边有浮动元素造成基线偏移，可显式调整对齐：

立即学习“前端免费学习笔记（深入）”；


page-agent 浏览器控制（CDP）
使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。
下载
• 给 SVG/canvas 设置 vertical-align: middle、top 或 bottom
• 避免用 vertical-align: baseline（默认值，易错位）
• 注意：该属性只对行内级和表格单元格生效，对块级或浮动元素本身无效

例如：<svg style="vertical-align: middle">...</svg>

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

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

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

示例：

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


 
文字内容

 


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