最有效起点是@media print中设float: none !important；必须同步重置clear: none !important和width: 100% !important；推荐改用display: flow-root替代浮动以确保分页生效。
直接在 @media print 里设 float: none !important 是最有效、最省事的起点。别试图保留浮动再微调 margin 或 width，那只会让打印预览更不可控。
为什么 float 在打印时完全失效
Chrome 和 Edge 的 PDF 导出引擎压根不处理 float 的脱离文档流语义——它不是渲染 bug，是规范行为。你看到的“错位”，其实是浮动元素被强制回退为块级行为，但没重置尺寸、流向和清除逻辑，导致内容堆叠、表格塌陷、页脚跑到中间。
常见错误现象包括：
-
.invoice-header { float: left; }在打印预览中消失或缩成一条线 -
.sidebar { float: right; }跑到正文下方，甚至被截断到下一页 - 给浮动容器加
page-break-after: always完全没反应
@media print 中必须重置的三项关键样式
不能只写 float: none 就完事。浮动残留的副作用会继续干扰布局，必须一并清理：
立即学习“前端免费学习笔记（深入）”；
- 所有可能浮动的容器（如
.main-content、.ad-banner、.nav-item）统一加float: none !important - 配套清除
clear：加clear: none !important，否则残留的clear: both会在无浮动上下文中制造意外空白 - 重置宽度：加
width: 100% !important，避免原width: 50%导致窄列挤在一起、文字换行异常
浮动容器改用 display: flow-root 更可靠
如果能改 HTML 结构，比“重置浮动”更治本的做法是把浮动父容器换成 display: flow-root。它既能包裹子项（类似清除塌陷），又让容器始终留在文档流中，break-after: page、break-inside: avoid 才真正起效。
示例对比：
/* 危险写法（打印时断页失效） */
.invoice-header { float: left; }
.invoice-footer { clear: both; page-break-after: always; }
<p>/<em> 安全写法（打印引擎可识别） </em>/
.invoice-section { display: flow-root; break-after: page; }
.invoice-item { display: inline-block; width: 49%; vertical-align: top; }
注意：flow-root 在 Chrome 64+/Firefox 58+ 稳定支持；IE 不支持，但 IE 本身也不支持现代分页属性，若必须兼容 IE，就别指望精准控制分页了。
改不了 HTML 时的兜底方案：插入分页锚点
第三方组件或老系统强制用浮动，又不能动结构？唯一可行的补救是在浮动块之后插入一个「透明锚点」：
- HTML 中动态加：
<div class="print-break"></div> - CSS 写：
.print-break { height: 0; overflow: hidden; break-after: page !important; } - 确保这个
div是普通块级、无内容、无边距、非float、非position: absolute
这个锚点不参与视觉渲染，但能被打印引擎当作一个「可中断的流内位置」，比给浮动块本身加 page-break-after 可靠得多。真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处没清干净，整页排版都可能崩掉。
