chrome和edge的pdf导出引擎不处理float脱离文档流语义，导致打印时内容堆叠、塌陷或消失；必须在@media print中同时重置float、clear和width，并优先用display: flow-root替代浮动。
为什么 float 在打印时根本不起作用
Chrome 和 Edge 的 PDF 导出引擎压根不处理 float 的脱离文档流语义——这不是 bug，是规范行为。float: left 在打印预览里常被直接忽略，或退化为无宽无高的块级行为，导致内容堆叠、表格列塌陷、页脚跑到正文中间，甚至整块消失。你看到的“截断”，其实是浮动元素被强制回退后，尺寸、流向、清除逻辑全没重置的结果。
@media print 中必须同时重置的三项样式
不能只写 float: none !important 就完事。残留的浮动副作用会继续干扰布局，必须一并清理：
- 所有可能浮动的容器（如
.main-content、.sidebar、.invoice-header）统一加float: none !important - 配套清掉
clear：加clear: none !important，否则残留的clear: both会在无浮动上下文中制造意外空白 - 重置宽度：
width: 100% !important，避免原width: 50%导致窄列挤在一起、文字换行异常
比“重置浮动”更可靠的替代方案
如果能改 HTML 结构，把浮动父容器换成 display: flow-root 是更治本的做法：
-
flow-root能包裹子项（类似清除塌陷），又让容器始终留在文档流中，break-after: page和break-inside: avoid才真正生效 - 它在 Chrome 64+/Firefox 58+ 稳定支持；IE 不支持，但 IE 本身也不支持现代分页属性，兼容 IE 就别指望精准控制分页了
- 示例：
.invoice-section { display: flow-root; break-after: page; }比.invoice-header { float: left; } .invoice-footer { clear: both; page-break-after: always; }可靠得多
legacy 代码无法重构时的兜底技巧
当第三方组件或老系统强制用浮动、你又不能动 HTML，唯一可行的补救是绕过浮动本身，在它之后插入一个「透明锚点」：
- 用 JS 动态追加一个
<div class="print-break"></div> - 在
@media print中设.print-break { height: 0; overflow: hidden; break-after: page; } - 确保这个 div 是块级、无内容、无边距、无背景，否则可能在屏幕端意外撑开空白
真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处 float 或 clear 残留，都可能让后续所有 break- 规则集体失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
