html没有“插入分页符”标签，只能靠css的page-break-或break-属性在打印时控制分页；这些样式对屏幕显示无效，必须用打印预览验证，且page-break-after:always因属建议性指令、依赖文档流而常静默失效，推荐统一使用page-break-before:always打头并配合@media print。
直接说结论：HTML 没有“插入分页符”的标签，只能靠 CSS 的 page-break-* 或 break-* 属性在打印时控制分页位置；这些样式对屏幕显示完全无效，必须用打印预览（Ctrl+P）验证。
为什么 page-break-after: always 总是不生效
这不是你写错了，而是浏览器分页引擎根本不把它当强制指令——它只是“建议”。只要元素后面没内容可承接，或者该元素脱离了文档流，这条规则就静默失效。
-
page-break-after对position: absolute、float、display: flex子项、display: grid子项完全无效 - 如果目标元素是页面最后一个块（比如
<footer></footer>后面没兄弟节点），Chrome 和 Firefox 都会跳过它 - 表格末尾加
page-break-after: always，第二页内容仍可能挤在同一页底部，而不是新开一页 - 某些框架（如 React 组件内联 style）会覆盖或忽略该属性，尤其未加
!important时
真正可靠的分页写法：用 page-break-before: always 打头
把分页动作明确落在“新内容的起点”，语义清晰、触发确定。哪怕父容器是 flex 或 grid，只要这个元素本身是块级且在文档流中，基本都能生效。
- 给章节标题加：
.chapter h1 { page-break-before: always; } - 两个报表区块之间插一个空
<div style="page-break-before: always;"></div>，比给上一个区块加after更干净 - 务必配合
@media print使用，否则开发时看不出效果 - 关键规则建议加
!important，例如：page-break-before: always !important;，防止被框架或外部样式覆盖
page-break-inside: avoid 在哪些场景会失效
这个属性本意是防止块内容被拆到两页，但实际兼容性差、限制多，容易白写。
- Firefox/Chrome/Safari 对
page-break-inside: avoid的支持不一致；Safari 15.4 之前完全不支持 - 对
<table> 直接设该属性，超长时整个表格会被推到下一页，而不是优雅跨页 <li>不能对 <code><tr> 或 <code><td> 设置——规范不支持，所有主流浏览器都无视 <li>父元素若设了 <code>overflow: hidden或transform，会创建新层叠上下文，阻断分页行为 - 更稳妥的做法：把长表格按逻辑拆成多个
<table>，中间用 <code><div style="page-break-before: always;"></div>分隔，并在@media print中补一句table { break-inside: avoid; }新旧语法怎么选：优先用
break-before: page，再 fallback 到page-break-beforepage-break-*是 CSS2 旧标准，break-*是 Fragmentation Level 3 新标准，但浏览器支持错位，不能只写一种。- Chrome 100+ 已基本弃用
page-break-inside，但 Firefox 对它支持更稳；两者都认break-before: page - 想避免元素被拆分，用
break-inside: avoid，别只依赖page-break-inside: avoid - 表格分页最麻烦：对
<tbody> 设 <code>break-inside: avoid比对<table> 更有效 <li>导出 PDF 时（如 wkhtmltopdf），<code>break-*支持极弱，务必先用 Chrome 打印预览确认效果
最容易被忽略的一点：所有分页控制都只在
@media print下起作用，而且必须确保目标元素是块级（display: block）、在正常文档流中、父容器没用overflow: hidden或transform—— 少一个条件，就可能白配。 - Chrome 100+ 已基本弃用
