根本原因是浏览器打印引擎对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 在现代打印中支持有限，推荐回归语义化块级结构：
- 用
<section></section>、<article></article>等语义标签包裹内容，天然块级、无浮动干扰 - 横向并排内容改用
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—— 定位与浮动混用在打印中极易错乱
基本上就这些。打印样式不是“缩小版网页”，而是独立输出通道，放弃浮动、拥抱块级流，是最简单也最可靠的解法。
