最有效起点是@media print中设float: none !important，但需同步重置clear: none !important和width: 100% !important，否则浮动残留会导致堆叠、错页等问题；更治本方案是用display: flow-root替代浮动。
直接在 @media print 里设 float: none !important 是最有效、最省事的起点。但只写这一条，90% 的打印错位问题依然会复现——因为浮动残留的副作用没被清理干净。
为什么只写 float: none 不够
打印引擎（Chrome/Edge PDF 导出、Firefox 打印预览）压根不处理浮动的脱离文档流语义。它不是渲染 bug，是规范行为：浮动元素被“降级”为普通块级元素，但原 width、clear、margin 全部保留，导致内容堆叠、窄列挤成一团、页脚卡在中间、甚至整页空白。
-
.sidebar { float: right; width: 30%; }→ 打印时变成一个 30% 宽的窄块，右侧大片留白，正文被挤到下一页 -
.invoice-header { float: left; clear: both; }→clear: both在无浮动上下文中制造额外空白，而float: none后它已失去作用对象 - 父容器高度塌陷未修复，后续内容直接跳过该区域，造成“视觉空白页”
@media print 中必须同步重置的三项关键样式
所有可能参与打印的浮动容器（如 .main-content、.ad-banner、.nav-item、img.float-right）都要统一处理：
- 强制清除浮动：
float: none !important - 清除残留影响：
clear: none !important（否则clear: both会在非浮动流中撑开意外空白） - 重置宽度：
width: 100% !important（避免width: 50%导致图文错行、文字换行异常）
示例：
@media print {
.sidebar, .ad-banner, img.float-right {
float: none !important;
clear: none !important;
width: 100% !important;
margin: 0 auto;
}
}
比“重置浮动”更治本：用 display: flow-root 替代浮动容器
如果 HTML 结构可改，这是唯一能让 break-after: page、break-inside: avoid 真正生效的方案。它既包裹子项（解决塌陷），又让容器始终留在文档流中。
- 旧写法（无效）：
.invoice-section { float: left; } .invoice-footer { clear: both; page-break-after: always; } - 新写法（可靠）：
.invoice-section { display: flow-root; break-after: page; } -
flow-root在 Chrome 64+/Firefox 58+ 稳定支持；IE 不支持，但 IE 本身也不支持现代分页属性，无需为它妥协
改不了 HTML 时的兜底动作：插入透明分页锚点
第三方组件或老系统强制用浮动、又不能动结构？唯一可行补救是在浮动块之后插入一个带 break-after: page 的空容器：
<div class="float-box"></div> <div style="page-break-after: always; height: 0; overflow: hidden;"></div>
这个锚点不占视觉空间，但能强制触发分页——比在浮动元素上硬加 page-break-after 可靠得多，因为后者在脱离文档流的元素上基本被忽略。
真正难的不是写几行 float: none，而是意识到：打印样式不是屏幕样式的子集，它是另一套渲染逻辑。浮动在打印里没有“对齐”意义，只有“破坏性残留”。删掉它，重置它，或绕过它，三者必选其一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
