page-break-after 对浮动元素无效是 css 规范行为，因浮动已脱离文档流；应改用 display: flow-root 创建 bfc 并配合 break-after: page，或插入流内锚点 div 实现可靠分页。
page-break-after 对浮动元素完全无效，这不是浏览器 bug，而是 CSS 规范行为——浮动已脱离文档流，断页指令根本找不到锚点。
为什么 float 元素加 page-break-after 没反应
打印引擎（尤其是 Chrome 和 Edge 的 PDF 导出）不为脱离流的元素计算分页位置。你给 .section { float: left; page-break-after: always; } 加断页，它大概率被忽略；Firefox 旧版偶有响应，但不可靠。
- 常见错误现象：
page-break-after: always或page-break-after: avoid在浮动块上完全无分页效果 - 根源不在属性名：换成现代语法
break-after: page同样失效，问题出在float本身 - 性能上没开销，但徒增维护成本——写一堆断页规则却不起作用
真正能用的替代方案：用 display: flow-root 替代 float
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，就别指望精准分页
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——某些打印引擎会跳过不可见元素，导致断页失效
@media print 中必须重置 float
打印引擎根本不把 float 当一回事。即使你用了 flow-root 或锚点，如果其他区域仍残留浮动，整个分页逻辑可能连锁失效。
- 统一在
@media print中重置：float: none !important、clear: none !important - 配套重置宽度：
width: 100% !important，避免残留width: 50%导致窄列挤在一起 - 浮动表格错位？重点不是
<table>，而是它前面那个 <code>float父容器——找出并重置它 - 别信
page-break-after在float元素上起作用，真正可控的位置只有清除浮动后的块级容器末尾
浮动是屏幕时代的 hack，打印时还留着它，等于主动放弃排版控制权。修复重点从来不是调参数，而是让关键容器回到文档流中——否则所有 page-break-* 都只是贴在伤口上的创可贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
