用 display: flow-root 替代 float 才能真正解决打印时浮动元素跨页断裂问题，因其保持元素在文档流中，使 break-after 等分页属性生效；强行对浮动元素使用 page-break-after 无效且不可靠。
打印时浮动元素跨页断裂怎么办
直接说结论：用 page-break-after 治标不治本，真正要解决的是「浮动破坏文档流」这个根源问题。打印引擎（尤其是 Chrome 和 Edge 的 PDF 导出）对浮动布局的分页处理极不可靠，强行加断页指令容易让内容被截断、空白页增多，甚至整页消失。
为什么 page-break-after 在浮动块上基本失效
因为浮动元素已脱离普通文档流，page-break-after 作用对象是「块级框在流内的位置」，而浮动块没有这个位置。你给一个 float: left 的 div 加 page-break-after: always，浏览器大概率会忽略它——不是 bug，是规范行为。
- 常见错误现象：
div.float-box { float: left; page-break-after: always; }完全没反应，或只在部分浏览器生效 - 使用场景：报表、发票、合同等需精确控制打印分页的页面
- 参数差异：
page-break-after的always/avoid对浮动块几乎无意义；换成break-after: page（CSS Fragmentation Level 3）也一样无效 - 性能影响：无实际开销，但徒增维护成本——写了一堆没用的断页规则
真正有效的替代方案：用 display: flow-root 替代 float
现代打印引擎对 BFC（块级格式化上下文）支持稳定，display: flow-root 能达成和浮动相似的包裹效果，同时保持元素在文档流中，断页指令才能起作用。
- 把原来的浮动清除逻辑全部删掉，比如去掉
clear: both和::after伪元素清浮动 - 将浮动容器改为：
div.container { display: flow-root; }，内部子元素用display: inline-block或flex排列 - 再配合
break-inside: avoid控制内部不跨页，或break-after: page在容器末尾强制分页 - 兼容性注意：IE 不支持
flow-root，但 IE 本身不支持现代打印分页属性，所以如果必须兼容 IE，就别指望精准分页了
/* 原来危险的写法 */
.invoice-item { float: left; width: 50%; }
.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 代码无法重构，或第三方组件强制用浮动时，唯一靠谱的做法是绕过浮动本身，在它之后插入一个「可见但无内容」的块级锚点，并对这个锚点施加断页规则。
立即学习“前端免费学习笔记（深入）”；
- 在浮动容器后紧跟一个空
div，设为display: block、height: 0、overflow: hidden - 给这个锚点加
page-break-after: always，并确保它不被浮动影响（比如父容器用overflow: hidden触发 BFC） - 避免用
visibility: hidden或display: none，否则断页失效；也别用position: absolute，它会让锚点脱离流 - 测试重点：不同缩放比例（60% / 100% / 150%）下是否仍能稳定分页——打印缩放会显著改变浮动换行位置
浮动布局和打印分页本身就是一对矛盾体，越想用老办法硬控，越容易在不同设备、不同 PDF 查看器里得到意外结果。真正省心的做法，是让内容回归文档流。
