应优先使用break-after替代page-break-after，因其是CSS Fragmentation标准正式方案，支持分页/分列/分区，且avoid-page等值在现代浏览器中兼容性更好；page-break-after仅对static/relative块级元素有效，在Flex/Grid/浮动/绝对定位等场景普遍失效。

page-break-after 在现代打印样式中基本不该用——它只对 position: static 或 relative 的块级元素起作用，而一旦父容器用了 flex、grid、transform、overflow: hidden，或者目标是 <tr>、<code><td>，这个属性就直接失效。 <h3>为什么 <code>page-break-after: always 经常没反应

不是写错了，而是浏览器根本不会处理。Chrome 和 Firefox 自 2023 年起已默认忽略 page-break-after: avoid、left、right；always 虽然还能触发分页，但只在极有限的 DOM 结构下生效：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 目标元素必须是块级（display: block 或 flow-root），不能是 inline、contents 或 flex/grid 子项
• 父元素不能有 transform、will-change、contain: paint 或 overflow: hidden/scroll
• 绝对定位、浮动、<table> 内部的元素全部不支持 <li>在 Tailwind 或 CSS-in-JS 框架里，如果组件被包裹在 <code>div 且加了 class="flex"，那直接设 page-break-after: always 就等于没写

该用 break-after 还是继续兼容 page-break-after

优先用 break-after，尤其 break-after: page 和 break-after: avoid-page：

• break-after: page 等价于旧版 page-break-after: always，但支持 Flex/Grid 容器内的块级子项（只要子项本身是块级）
• break-after: avoid-page 是目前唯一真正能“防撕裂”的选项，Chrome 105+、Firefox 102+、Safari 16.4+ 全支持
• 如果还要兼容老版本 Edge 或 IE，可双写：break-after: avoid-page; page-break-after: avoid;，但注意 IE 不认 avoid-page
• 别再给 <tr> 设任何 <code>page-break-after —— 浏览器规范明确不支持，写了也白写

  表格、卡片、Flex 列表里怎么安全分页

  这些结构最容易出现“标题在上页、内容在下页”的断裂，单靠 page-break-after 无法解决：

  立即学习“前端免费学习笔记（深入）”；

  • 表格：不要给 <table> 加 <code>page-break-after；想整体不跨页，应在外层 <div> 上设 <code>break-inside: avoid；想分页并保留表头，需拆成多个 <table>，每个带完整 <code><thead>，中间插 <code><div style="break-before: page"></div>
  • Flex 卡片列表：父容器加 break-inside: avoid，每张卡片用 break-after: avoid-page（作用于卡片最外层 div，不是内部 span）
  • 使用 float 布局时，page-break-after 在 Chrome 下会彻底失效；改用 display: inline-block 或直接切到 Flex/Grid

  真正关键的不是“加在哪”，而是“能不能被浏览器识别为一个可分页的块级上下文”——很多失败案例，根源是开发者把分页指令塞进了脱离文档流或被层叠上下文截断的元素里。