必须用 break-before + @media print + @page 三者配合才可靠；page-break-before 常失效因仅作用于块级元素，且在 flex/grid 容器、绝对定位、transform 等场景下被阻断，现代浏览器已弱化支持，需双写并严格遵循作用域与顺序。
直接说结论：不能只靠 page-break-before 这类旧属性，必须用 break-before + @media print + @page 三者配合，且顺序和作用域不能错。
为什么 page-break-before 经常不生效
它只对 display: block 且非 flex/grid 容器子项的元素起作用。一旦父容器是 display: flex 或 display: grid，哪怕你写了 page-break-before: always，浏览器也当没看见。Chrome 100+ 和 Firefox 90+ 已基本弃用这套语法，只保留兼容性解析。
- 必须显式加
display: block，不能依赖默认行为 - 避免在
float、position: absolute、transform元素上使用 - 表格整体设
page-break-inside: avoid无效，得改用break-inside: avoid作用于tbody或每个tr - 测试时一定要打开真实打印预览（Ctrl+P），DevTools 的模拟模式不触发分页逻辑
break-before: page 怎么写才可靠
这是目前跨浏览器最稳的强制分页方式，但有硬性前提：
- 目标元素必须是块级，建议写成
div.section-header { display: block; break-before: page; } - 必须放在
@media print块内，否则不参与打印样式计算 - 如果同时写了
break-before和page-break-before，前者优先；推荐双写保兼容：break-before: page; page-break-before: always; - 不要给
h2这类语义标签直接加，先包一层div再控制，避免被浏览器默认样式干扰
@page 规则必须平级声明，不能嵌套
@page 不是 CSS 样式规则，它定义的是物理纸张本身。写在 @media print 里面等于作废。
立即学习“前端免费学习笔记（深入）”；
- 正确写法是：
@page { size: A4; margin: 15mm; }，单独放在<head>的<style>里 -
@page :first只在 Firefox 真实打印中有效，Chrome/Edge 完全忽略，别指望它统一控制封面边距 - 单位只能用
mm、in、cm，px或em会被浏览器无视 - 如果需要首页不同边距，只能接受 Firefox 专属支持，其他浏览器 fallback 到通用
@page
表格和卡片这类结构怎么防跨页断裂
它们是最容易出问题的场景，因为默认渲染会把内容“切开”输出到两页。
- 对表格：不要给
<table>加break-inside: avoid，而是给<tbody>加，并确保tbody是块级（display: block） - 对 Flex/Grid 卡片列表：先在
@media print中重置父容器为display: block，再对每张卡片加break-inside: avoid - 对
<tr>，break-inside: avoid支持不稳定，更可靠的是用break-before: avoid-page（Chrome 105+ / Firefox 102+） - 所有关键分页规则建议加
!important，防止被框架或组件样式覆盖
真正难的不是写对某一行 CSS，而是理解浏览器在打印上下文中会重走一遍布局流程——它不认浮动、不认 fixed、不认 flex 子项的分页声明。所有控制都得回归文档流本体，稍有偏差，就只剩一页空白加一个孤零零的标题。
