page-break-after 在浮动元素上无效，因浮动脱离文档流，断页指令只对流内元素生效；应改用 display: flow-root 并配合 break-after: page，或插入流内锚点 div 实现分页。
page-break-after在浮动元素上基本无效，这不是浏览器 bug，而是 CSS 规范行为——浮动元素已脱离文档流，而断页指令只对流内位置起作用。
为什么 page-break-after: always 对 float 元素没反应
打印引擎（尤其是 Chrome 和 Edge 的 PDF 导出）根本不会为脱离流的元素计算分页锚点。你给一个 float: left 的 div 加 page-break-after: always，它大概率被忽略。
- 常见错误现象：
.section { float: left; page-break-after: always; }在预览里完全没分页，或只在 Firefox 旧版偶然生效 - 使用场景：发票明细块、左右并排的报表区域、Bootstrap
col-*网格下的打印分页 - 参数差异：
page-break-after: avoid同样无效；换成现代语法break-after: page也一样失效，根源不在属性名，而在浮动本身
真正能用的替代方案：用 display: flow-root 替代 float
flow-root 创建 BFC，既保留包裹能力（类似 float 清除塌陷的效果），又让元素留在文档流中，此时 break-after: page 才有作用。
- 把原浮动容器的
float和配套的clear全部删掉，包括::after清浮动伪类 - 改写为：
.print-section { display: flow-root; break-after: page; } - 内部子项改用
display: inline-block或display: flex排列，避免再引入新浮动 - 兼容性注意：IE 不支持
flow-root，但 IE 本身也不支持现代打印分页属性，若必须兼容 IE，就别指望精准分页了
实在没法重构浮动时，加一层「分页锚点」兜底
当第三方组件或遗留代码强制使用 float，且无法修改结构时，唯一可靠做法是绕过浮动本身，在它后面插入一个独立的、无内容但可受控的块级锚点。
- HTML 中紧接浮动容器后加：
- CSS 写：
.print-break { height: 0; overflow: hidden; page-break-after: always; break-after: page; } - 这个
div必须是普通流内块级元素，不能是float、position: absolute或display: inline - 不要设
visibility: hidden或opacity: 0——某些打印引擎会跳过不可见元素，导致断页失效
浮动导致的打印断裂，本质是文档流丢失引发的连锁失效。修复重点从来不是调参数，而是让关键容器回到流内——否则所有 page-break-* 都只是贴在伤口上的创可贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
