最稳定分页方式是用 page-break-before: always 插在新页内容前；page-break-after 因属建议性指令且受文档流限制常静默失效，而拆分表格并配合空 div 分页占位更可靠。
直接用 page-break-before: always 插在要新开一页的元素前面，是最稳、兼容性最好的做法；别依赖 page-break-after，它在很多场景下会静默失效。
为什么 page-break-after: always 经常不生效
这不是 bug，是浏览器分页引擎的底层逻辑决定的：page-break-after 是“建议”，不是强制锚点。它只在元素后面**有内容可承接**、且该元素本身**未脱离文档流**时才可能触发。
- 如果元素后面没兄弟节点（比如它是最后一个
<div>），浏览器直接忽略这条规则 -
position: absolute、float、display: flex子项等会让它彻底失效 - 表格末尾加
page-break-after: always，但第二页内容紧贴着挤在同一页底部——这是最典型的表现
真正可靠的分页写法：用 page-break-before: always 打头
把分页动作明确落在“新内容的起点”，语义清晰，触发确定。哪怕父容器是 flex 或 grid，只要这个元素是块级且在文档流中，就基本能生效。
- 给章节标题加：
.chapter h1 { page-break-before: always; } - 在两个报表区块之间插一个空
<div style="page-break-before: always;"></div>，比给上一个区块加after更干净 - 配合
@media print使用，开发时必须打开打印预览（Ctrl+P）验证，普通页面渲染看不出效果
表格跨页断裂的实操解法
对 <table> 直接设 page-break-inside: avoid 有一定效果，但表格超长时会整体掉到下一页，而不是优雅分页。更可控的做法是结构层面拆分。
立即学习“前端免费学习笔记（深入）”；
- 不要对
<tr>或<td>设任何分页属性——规范不支持，Chrome/Firefox 都无视 - 把长表格按逻辑段落拆成多个独立
<table>，每个都带完整<thead> - 在它们之间插入
<div style="page-break-before: always;"></div>，并在@media print中补一句table { break-inside: avoid; }作兜底 - 如果用 wkhtmltopdf 导出 PDF，
break-*属性支持极弱，务必优先用 Chrome 打印预览确认效果
现代写法要不要加？怎么加才不翻车
可以加，但不能只加。W3C 推荐的 break-before: page 等属性在 Chrome 115+、Firefox 100+ 已稳定，但 IE 和部分旧版 Edge 完全不认。
- 安全写法是同时声明：
.section { page-break-before: always; break-before: page; } -
break-inside: avoid对<table>的支持仍不稳定（2026 年 4 月 Chrome 测试中仍有偶发失效），所以page-break-inside: avoid不能删 - 别对行内元素（如
<span>）、display: inline容器设这些属性——它们只对块级元素起作用
最容易被忽略的一点：分页是否生效，和页面边距强相关。如果用了 @page { margin: 2cm }，但内容区域高度算错了，哪怕所有 CSS 都写对了，也会因实际可用空间不足导致分页失败。每次调完样式，记得重新量一遍「内容高度 + 页边距」是否 ≤ 纸张高度。
