根本原因是浏览器打印引擎对float支持不一致，导致错位；应在@media print中禁用float，设display: block、width: 100%、clear: both，并优先使用语义化块级结构或table布局。

浮动元素在打印时错位，根本原因是大多数浏览器的打印预览和打印引擎对 float 的支持不一致，尤其在分页、缩放或自动换行时容易脱离文档流，导致位置漂移、重叠甚至消失。

打印样式中彻底禁用 float

浮动本为网页流式布局设计，不适合打印这种固定介质。应在 @media print 中显式清除浮动行为：

• 将浮动元素设为 display: block（默认值），并配合 width: 100% 占满行宽
• 用 clear: both 清除残留浮动影响（尤其对后续兄弟元素）
• 避免使用 float: left/right，改用 display: inline-block 或 Flex 布局（需确认浏览器打印兼容性）

优先使用更稳定的打印布局方式

Flex 和 Grid 在现代打印中支持有限，推荐回归语义化块级结构：

• 用
  、 等语义标签包裹内容，天然块级、无浮动干扰
• 横向并排内容改用 display: table / table-cell（打印兼容性极佳，IE8+ 支持）
• 如需两栏，可用 column-count: 2 配合 break-inside: avoid 控制分栏断点

强制重置浮动相关属性

仅清除 float 不够，还需归零依赖它的表现：

• 设置 float: none !important（加 !important 防止被其他样式覆盖）
• 重置 margin 和 width：浮动常伴随 margin-right 或窄宽，打印时应设为 auto 或 100%
• 移除 position: relative/absolute —— 定位与浮动混用在打印中极易错乱

基本上就这些。打印样式不是“缩小版网页”，而是独立输出通道，放弃浮动、拥抱块级流，是最简单也最可靠的解法。