打印时浮动布局失控是因为打印引擎不处理float，需在@media print中重置为float:none并改用flow-root或flex等现代布局。
为什么打印时浮动布局会彻底失控
因为打印引擎（尤其是 Chrome 和 Edge 的 PDF 导出）根本不把浮动当一回事——float: left 在打印预览中常被直接忽略，或只在部分页面生效，导致内容堆叠、换行异常、页脚错位甚至整块消失。这不是渲染 bug，而是规范行为：float 的设计目标是图文环绕，不是分页布局，打印流程压根不保证它参与文档流重建。
必须在 @media print 中显式重置浮动
不能指望屏幕样式继承到打印环境。所有浮动相关规则都得在打印媒体查询里「重新声明」，且要主动清空，而不是留着等浏览器猜：
- 对所有可能浮动的容器，统一加
float: none !important - 配套重置宽度：
width: 100% !important，避免残留width: 50%导致窄列挤在一起 - 清除历史遗留的
clear指令，它在无浮动上下文中反而制造空白间隙 - 如果原布局依赖浮动实现多栏，这里就该切到
display: flex或display: table降级方案
用 display: flow-root 替代浮动容器更可靠
如果你能改 HTML 结构，比「重置浮动」更治本的做法是：把原来包裹浮动子项的父容器，从 float 改为 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; }
legacy 代码无法重构时的兜底技巧
当第三方组件或老系统强制使用浮动，你又不能动 HTML，唯一可行的补救是在浮动块之后插入一个「透明锚点」：
- 用 JS 动态追加一个
<div class="print-break"></div> - 在
@media print中设.print-break { height: 0; overflow: hidden; break-after: page; } - 确保这个
div是块级、无内容、无边距，否则可能在屏幕端意外撑开空白
这个锚点不参与视觉渲染，但能被打印引擎当作一个「可中断的流内位置」，比给浮动块本身加 page-break-after 可靠得多。
真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处 float 残留，都可能让后续所有 break- 规则集体失能。
