安全插入分页符应使用独立块级空div并设置page-break-before: always，避免在inline、absolute、flex或grid子元素上直接应用；table分页需对整个table设page-break-inside: avoid，并确保thead为display: table-header-group。
直接用 display: none 隐藏元素 + page-break-before: always 强制分页，大概率会失效——因为浏览器打印渲染通道独立于屏幕，且分页属性对脱离文档流的元素（position: absolute、float、flex 容器子项）完全不生效。
怎样安全地插入分页符？
别把 page-break-before: always 往内容块上硬套。它在 inline、absolute、flex 或 grid 子元素上基本无效，调试时也看不到任何提示。
- 最稳妥做法：在需要分页的位置插入一个空的
<div>，单独加 <code>page-break-before: always - 这个
<div> 必须是块级、非浮动、未脱离文档流的普通元素<li>不要给它设 <code>height、margin或其他可能撑开空间的样式，否则会引入意外空白页 - 示例：
<div style="page-break-before: always;"></div> - 真正有效的写法是：给整个
<table> 加 <code>page-break-inside: avoid - 同时确保
<thead> 显式声明为 <code>display: table-header-group，否则跨页时表头不会重复 - 避免用
flex或grid包裹<table>，它们会破坏表格的原生分页行为<li>长表格横向打印需配 <code>@page { size: landscape; }，且父容器加max-width: none; - 如果通用 CSS 里用了
* { display: block; }这类宽泛重置，会强行覆盖.no-print { display: none; } - 外部样式表加载顺序错位：
@media print规则必须出现在所有屏幕样式之后，否则优先级不够 - 更可靠的方式是用
<link rel="stylesheet" media="print" href="print.css">单独引入，彻底隔离 - 慎用
!important：它虽能压住冲突，但会让后续调试变困难；优先靠选择器特异性解决
为什么 page-break-inside: avoid 对表格没用？
对 <tr> 或 <code><td> 加 <code>page-break-inside: avoid 是徒劳的——该属性只对块级容器生效，而表格行/单元格不是块盒。
隐藏元素为什么有时仍被打印出来？
display: none 在 @media print 中看似可靠，但实际容易被覆盖或忽略：
立即学习“前端免费学习笔记（深入）”；
调试打印样式时最容易忽略的一点
@page 规则不能嵌在 @media print 里面——哪怕只差一层大括号，整条规则就静默失效。它必须和 @media print 平级声明，且只能出现在顶层 CSS 中。
另外，break-inside: avoid 和 page-break-inside: avoid 不是等价替代：前者是现代标准但兼容性差（Safari 15.4+ 才稳定），后者虽属旧规范但所有打印引擎都认。生产环境优先用后者。
