浮动元素上 page-break-after 无效是规范行为而非 bug，因其已脱离文档流；应改用 display: flow-root 并配合 break-after: page，或插入流内锚点 div 实现可靠分页。
page-break-after 加在 float 元素上根本不起作用
这不是浏览器 bug，是 CSS 规范行为：浮动元素已脱离文档流，而 page-break-after 和 break-after: page 都只对流内块级元素生效。你写 .section { float: left; page-break-after: always; }，Chrome、Edge 的 PDF 导出引擎会直接跳过它；Firefox 旧版偶有响应，但不可靠。
- 常见错误现象：
.invoice-footer { clear: both; page-break-after: always; }在打印预览里完全没反应 - 参数差异：
break-after: page和page-break-after: always在浮动上同样无效，问题不在属性名，而在float本身 - 性能上没开销，但徒增维护成本——写一堆断页规则却不起作用
display: flow-root 是最干净的替代方案
把原浮动容器从脱离流的状态拉回来，才是让分页指令真正生效的前提。display: flow-root 创建 BFC，能包裹子项（类似清除塌陷），又保持自身在文档流中，break-after: page 才有锚点可依。
- 删掉所有
float、clear及伪类::after清浮动代码 - 改写为：
.print-section { display: flow-root; break-after: page; } - 内部子项改用
display: inline-block或display: flex排列，避免再引入新浮动 - 兼容性注意：IE 不支持
flow-root，但 IE 本身也不支持现代打印分页属性，若必须兼容 IE，精准分页本就不可控
@media print 中必须重置所有浮动残留
即使你用了 flow-root，只要其他区域还残留 float，整个分页逻辑可能连锁失效。打印引擎不处理浮动语义，但残留的 width、clear 会干扰布局重建。
- 统一加：
float: none !important、clear: none !important、width: 100% !important - 特别注意表格错位问题——根源常是它前面那个
float父容器，不是<table>本身 - 别指望用
margin或padding微调来“修复”浮动，那只会让打印预览更不可控
legacy 代码无法重构时，插入流内锚点是唯一兜底手段
当第三方组件或老系统强制使用 float，且你不能改 HTML 结构，唯一可靠做法是绕过浮动本身，在它后面插入一个独立的、无内容但可受控的块级锚点。
立即学习“前端免费学习笔记（深入）”；
- HTML 中紧接浮动容器后加：
<div class="print-break"></div> - CSS 写：
.print-break { height: 0; overflow: hidden; break-after: page; page-break-after: always; } - 这个
div必须是普通流内块级元素，不能是float、position: absolute或display: inline - 不要设
visibility: hidden或opacity: 0——某些打印引擎会跳过不可见元素，导致断页失效
float 残留，都可能让后续所有 break- 规则集体失能。 
