浮动父容器高度塌陷导致canvas被“吃掉”，因其子元素浮动未清除致父容器高度为0；canvas基线对齐产生底部留白；响应式下未重设width/height引发拉伸；第三方重置未覆盖vertical-align加剧错位。
浮动父容器高度塌陷让canvas被“吃掉”了
Canvas 画布错位，常不是它自己画歪了，而是它所在的父容器高度为 0 —— 因为父容器里只有浮动子元素，没清浮动。此时 canvas 实际渲染位置可能被压到上层内容下方、或被其他块级元素覆盖，表现为“突然消失”“位置偏移”“点击区域错乱”。
快速验证：打开 DevTools，选中 canvas 元素，看它的 offsetTop 是否异常小（比如接近 0），再往上查父容器的 computed height —— 若为 0px 或远小于预期，基本就是浮动未清导致的高度塌陷。
- 不要只看 HTML 结构是否写了
clear: both，要确认该声明生效在**正确的位置**（必须紧跟浮动元素之后，且在同一 BFC 内） - 用
overflow: hidden清浮动时，若父容器有border-radius或transform，可能意外裁剪 canvas 内容 - Flex 或 Grid 容器里嵌浮动项，本身就不推荐；此时
clear无效，必须改用display: flex或display: grid布局替代浮动
canvas 在浮动流中基线对齐引发底部留白
当 canvas 被放在 float: left 的容器里，或自身设了 float，它默认是 display: inline，会像文字一样按基线（baseline）对齐。结果就是在画布下方空出约 4px 空隙，导致父容器高度多出这一截，后续元素错位，或者 canvas 内容看起来“上浮”。
这不是 canvas 画错了，是排版行为干扰了布局。尤其在和文字、img 混排时特别明显。
- 加
vertical-align: top或vertical-align: middle可立即消除底部留白 - 更彻底的做法是加
display: block—— 这同时解决基线问题 + 防止父容器因 inline 行为塌陷 - 若用了 normalize.css 或自定义 reset，检查是否漏掉了
canvas { vertical-align: top; }，Safari 和旧版 iOS WebKit 对此尤其敏感
浮动+响应式尺寸下canvas.width/height未重算
浮动容器常用于栅格布局（比如左右两栏），一旦窗口 resize，容器宽度变化，但很多人只监听 resize 重绘 canvas 内容，却忘了重设 canvas.width 和 canvas.height 属性 —— 导致画布物理分辨率仍卡在初始值，CSS 显示尺寸已变，图形被拉伸或压缩。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
典型现象：横屏 iPad 上图表线条发虚、圆角变椭圆、鼠标点击坐标偏移超过 20px。
- 每次 resize 后，必须重新获取
canvas.getBoundingClientRect()，再按当前devicePixelRatio设置width/height属性 - 别用
offsetWidth/offsetHeight获取尺寸——它们不包含 CSS 缩放影响，且在浮动容器中可能返回 0 - 如果父容器是
float+width: 50%，还要注意 box-sizing 是否为border-box，否则 padding 会挤占 canvas 可用宽度
第三方样式重置未覆盖canvas的vertical-align
很多项目用了 normalize.css 或自定义 reset，但没显式设置 canvas 的 vertical-align。而浏览器默认值是 baseline，这在浮动上下文中极易引发对齐错位，且该问题在 Chrome 和 Safari 下表现不一致——Chrome 可能渲染正常，Safari 却多出 3–4px 空隙，导致整个图表下移。
这个坑藏得深：你检查了所有浮动清除逻辑、也重算了 DPR，但 canvas 就是“差那么一点”。
- 务必在 reset 规则里加上：
canvas { vertical-align: top; } - 不要依赖
* { vertical-align: baseline; }这类泛匹配，它会被后续 specificity 更高的规则覆盖 - 用 DevTools 的 Computed 面板直接查
canvas的vertical-align值，确认来源是你写的 CSS 文件，而非浏览器默认
真正麻烦的不是某一行代码写错，而是浮动布局把 canvas 推离了文档流，又没给它明确的对齐锚点和尺寸上下文——这时候 canvas 不是“错位”，是“失重”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
