打印预览中float元素断页失效，是因为打印引擎不解析脱离文档流的float语义，必须用display: flow-root替代或插入流内锚点div实现可靠分页。
因为打印引擎压根不处理 float，它不是渲染 bug，而是规范行为——浮动元素脱离文档流，而分页机制只认流内位置。
打印引擎直接跳过 float 语义
Chrome、Edge 的 PDF 导出模块和多数浏览器打印后端，对 float: left 或 float: right 不做解析。它们不会重建 BFC，也不计算浮动带来的文档流偏移。你看到的“断层”，其实是浮动元素被强制回退为普通块级行为，但尺寸、清除逻辑、宽度继承全没重置，导致内容堆叠、列宽塌陷、页脚卡在中间。
-
float的设计目标是图文环绕，不是分页布局，打印流程不保证它参与文档流重建 - 哪怕只漏一个未重置的浮动父容器，后续所有
break-after、page-break-after都会集体失效 -
clear: both在无浮动上下文中反而制造空白间隙，尤其在表格或发票区块里特别明显
page-break-after 加在 float 元素上等于没写
page-break-after: always 和 break-after: page 都只对文档流内的块级元素生效。浮动元素已脱离流，浏览器找不到锚点，指令直接被忽略。
- 常见错误：
.invoice-section { float: left; page-break-after: always; }—— 预览里完全没反应 - 别指望用旧语法兜底：
page-break-after和break-after在浮动上同样无效，根源不在属性名，而在float本身 - 真正可控的位置只有：清除浮动后的块级容器末尾，比如
.invoice-section { break-after: page !important; }
替代方案不是微调，而是让容器回归流内
修复重点从来不是调参数，而是把关键容器拉回文档流——否则所有断页规则都是贴在伤口上的创可贴。
- 首选：
display: flow-root替代float，它创建 BFC、包裹子项、保留在流内，break-after: page才能起效 - 降级方案：改用
display: flex或display: table，并确保子项是display: block或inline-block - legacy 代码无法改 HTML？在浮动块后插入一个流内锚点：
<div class="print-break"></div>，再在@media print中设.print-break { height: 0; overflow: hidden; break-after: page; }
真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕一处 float 残留，都可能让后续所有分页控制彻底失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
