最有效起点是@media print中设float: none !important，但必须同步重置clear: none !important和width: 100% !important，否则仍会因残留样式导致空白、堆叠或截断。
直接在 @media print 中设 float: none !important 是最有效起点，但只写这一条大概率还是错乱——必须同步清理 clear 和 width，否则打印引擎会用残留样式制造空白、堆叠或截断。
为什么 float: none 单独写没用
浮动元素在 Chrome/Edge 的 PDF 打印引擎中不是“失效”，而是被完全跳过解析。你看到的错位，其实是它把原浮动块当普通块级元素回退渲染，但没重置尺寸和清除逻辑：
-
clear: both在无浮动上下文中会强制下移，生成意外空白行 -
width: 50%这类窄宽值会让文字挤成一列、换行异常，甚至触发横向溢出 - 父容器若靠浮动子项撑高，
float: none后若没补display: flow-root或overflow: hidden，高度可能塌陷为 0，导致后续内容全被挤到下一页
@media print 中必须重置的三个关键属性
不能只改 float，这三项必须成套声明，且加 !important：
-
float: none !important：对所有可能浮动的类（如.sidebar、.invoice-header、.ad-banner）统一重置 -
clear: none !important：清掉历史遗留的clear: both，尤其别加在浮动元素自己身上（它不生效） -
width: 100% !important：避免窄列挤压；若需多列，改用display: flex或display: table控制
比清除更可靠的替代方案：用 display: flow-root
如果能改 HTML 结构，直接删掉浮动相关代码，把原浮动容器换成 display: flow-root，是最省心的解法：
-
flow-root能创建 BFC，包裹子项效果类似清除塌陷，又让容器始终留在文档流中 -
break-after: page、break-inside: avoid等分页指令才能真正起效 - Chrome 64+/Firefox 58+ 稳定支持；IE 不支持，但 IE 本身也不支持这些分页属性，兼容性可忽略
- 示例：
.invoice-section { display: flow-root; break-after: page; }，内部子项用display: inline-block或flex排列
legacy 代码无法重构时的兜底锚点技巧
第三方组件或老系统强制用浮动，又不能动 HTML？唯一靠谱做法是插入一个流内锚点：
- 用 JS 在每个浮动容器后动态加：
<div class="print-break"></div> - 在
@media print中定义：.print-break { display: block; height: 0; overflow: hidden; break-after: page; } - 确保它无内容、无边距、不参与屏幕渲染，但能让打印引擎识别为可中断的流内位置
真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处 float 残留，都可能让后续所有 break- 规则集体失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
