page-break-after 对 float 元素无效，因其已脱离文档流；规范要求该属性仅作用于正常流中的块级元素，故应改用 display: flow-root 或插入流内锚点解决。
page-break-after 对 float 元素为什么完全没反应
因为浮动元素已脱离文档流，而 page-break-after 只对处于正常流中的块级元素生效——这不是浏览器 bug，是 CSS 规范明确规定的限制。Chrome、Edge、Firefox 在 PDF 导出或打印预览中都会跳过对 float 元素的分页计算，哪怕你写了 page-break-after: always，它也大概率被静默忽略。
常见错误写法：.section { float: left; page-break-after: always; }，在预览里毫无分页效果，或仅在极旧版 Firefox 中偶然起作用。
真正起作用的前提是：目标元素必须是 position: static 或 relative 的块级元素，且未脱离流。浮动、position: absolute、display: flex 子项、display: grid 子项、<tr> 等全部不在此列。<h3>用 display: flow-root 替代 float 是最干净的解法</h3>
<p>把原浮动容器的 <code>float 和配套的 clear（包括伪类 ::after）全部删掉，改用 display: flow-root 创建 BFC，既保留包裹能力，又让元素留在文档流中——此时 break-after: page 才能真正生效。
实操步骤：
- 移除所有
float、clear相关声明 - 给容器设
display: flow-root; break-after: page; - 内部子项改用
display: inline-block或display: flex排列，避免再引入新浮动 - 若需兼容 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; }
</p>
实在没法改结构？插入流内锚点兜底
当第三方组件或遗留代码强制使用 float，且你无法修改 HTML 结构时，唯一可靠做法是在浮动容器后插入一个独立的、无内容但可受控的块级锚点。
关键要求：
- 这个
<div class="print-break"></div>必须是普通流内块级元素，不能是float、position: absolute或display: inline - CSS 中设
height: 0; overflow: hidden;，确保它不撑开屏幕端布局 - 不要用
visibility: hidden或opacity: 0——某些打印引擎会跳过不可见元素 - 必须同时写
page-break-after: always和break-after: page，兼顾新旧环境
HTML 示例：
<div class="legacy-float-section">...</div> <div class="print-break"></div>
CSS 示例：
@media print {
.print-break {
height: 0;
overflow: hidden;
page-break-after: always;
break-after: page;
}
}
别再依赖 page-break-after，优先用 break-after
page-break-after 是 CSS2 的老语法，在 Flex/Grid/浮动/绝对定位等现代布局中普遍失效；而 break-after 是 CSS Fragmentation Level 3 标准的正式替代方案，覆盖分页、分列、分区三类上下文，且 break-after: avoid-page 在 Chrome 105+、Firefox 102+、Safari 16.4+ 均稳定支持。
注意点：
-
break-after: page等价于page-break-after: always，但更可靠 -
break-after: avoid-page是防内容被撕裂的首选，比旧avoid兼容性好得多 - 目标元素必须是块级（
display: block或flow-root），父容器不能有overflow: hidden、transform、contain: paint - 不要对
<table>、<code><tr>、<code><td> 直接设 <code>break-after，它们不在规范支持范围内浮动导致的打印断裂，本质是文档流丢失引发的连锁失效。修复重点从来不是调参数，而是让关键容器回到流内——否则所有
page-break-*都只是贴在伤口上的创可贴。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
