page-break-系列属性已基本失效，必须用break-before/break-after/break-inside配合display:flow-root；浮动和绝对定位元素脱离文档流导致分页无效；表格跨页需用break-inside:avoid或js拆分；firefox优先用break-before:page；打印异常需检查@media print加载和chrome背景图形设置。
直接说结论：page-break- 系列属性在现代浏览器中已基本失效，真正可控的分页必须用 break-before、break-after 和 break-inside，并配合 display: flow-root 拉回文档流——否则再写十遍 page-break-after: always 也没用。
为什么 page-break-after 在浮动/绝对定位元素上完全没反应
这不是浏览器 bug，是 CSS 规范行为：浮动（float）和绝对定位（position: absolute）会让元素脱离文档流，而所有分页控制属性都只对「流内块级框」生效。你给一个 float: left 的 <div> 加 <code>page-break-after: always，Chrome 和 Edge 的 PDF 导出引擎会直接跳过它；Firefox 旧版本偶有响应，但不可靠。
- 删掉所有
float、clear和伪类::after清浮动代码 - 把容器改成
display: flow-root—— 它创建 BFC，包裹子项，同时保持自身在流内 - 再加
break-after: page或break-after: always，指令才有锚点可依 - 若必须兼容 IE，别指望精准分页；IE 本身不支持现代分页属性，
page-break-inside: avoid是唯一能用的底线
表格跨页被截断？别碰 ，改用 table + break-inside
<tr> 和 <code><td> 上写 <code>break-inside: avoid 或 page-break-inside: avoid 基本无效。浏览器把整张 <table> 当作一个不可拆分单元，分页逻辑不会深入到行级。
<ul><li>给 <code><table> 直接加 <code>break-inside: avoid（Chrome v80+ / Firefox v115+ 支持）
兼容旧版浏览器时，用 page-break-inside: avoid 作为 fallback
若表格实在过长必须分页，不要强行切 <tr>，而是用 JS 拆成多个 <code><table>，每个外层包一层 <code><div class="print-page"></div>，再对这个 <div> 加 <code>break-after: always
避免给 <table> 直接设 <code>break-after: page —— 它会被忽略，因为 <table> 不响应该属性
<h3>Firefox 中 break-after: page 不生效，换 break-before 或 always</h3>
<p>Firefox 对 <code>break-after: page 解析更保守，尤其当元素高度接近页面剩余空间时，可能延迟触发或直接忽略；Chrome 则倾向提前分页，导致末页留白多。这不是 bug，是 Fragmentation Level 3 规范实现节奏不同。
- 章节标题、报告封面等「必须新开一页」的位置，优先用
break-before: page —— Firefox 对它支持最稳
- 若必须用
break-after，改用 break-after: always（而非 page），它在 Firefox 和 Safari 中兼容性更好
- 别直接写在
<section></section> 或 <div> 上，先套一层语义化容器（如 <code><article></article>），再通过类名控制，减少浏览器对匿名块的处理歧义
- 用
@supports (break-after: always) 包裹规则，确保老浏览器降级到 page-break-after: always
打印预览正常但 Ctrl+P 输出异常？检查 @media print 加载时机和覆盖逻辑
很多问题不是样式写错了，而是没被真正应用：CSS-in-JS 库（如 styled-components）默认不注入 @media print 规则；!important 在打印上下文中权重更高，反而容易反向干扰；Chrome「背景图形」开关也会无视你的 background 设置。
- 确保
@media print 规则写在主样式表里，或用 <link rel="stylesheet" media="print"> 单独引入
- 禁用开发者工具里的「强制打印样式」模拟，那只是视觉预览，不代表真实
window.print() 行为
- Chrome 打印设置右上角 → 「更多设置」→ 关闭「背景图形」，否则
background: transparent !important 都救不了
- 避免泛用
!important，优先提升选择器特异性，比如用 body.print-ready main h2 而不是 h2
最容易被忽略的一点：所有分页控制都依赖「容器在文档流中」这个前提。一旦你用了 float、position: fixed、display: flex/grid 且没做流内兜底，break-* 属性就只是摆设。别调样式，先调结构。
<tr> 和 <code><td> 上写 <code>break-inside: avoid 或 page-break-inside: avoid 基本无效。浏览器把整张 <table> 当作一个不可拆分单元，分页逻辑不会深入到行级。
<ul><li>给 <code><table> 直接加 <code>break-inside: avoid（Chrome v80+ / Firefox v115+ 支持）
page-break-inside: avoid 作为 fallback<tr>，而是用 JS 拆成多个 <code><table>，每个外层包一层 <code><div class="print-page"></div>，再对这个 <div> 加 <code>break-after: always
<table> 直接设 <code>break-after: page —— 它会被忽略，因为 <table> 不响应该属性
<h3>Firefox 中 break-after: page 不生效，换 break-before 或 always</h3>
<p>Firefox 对 <code>break-after: page 解析更保守，尤其当元素高度接近页面剩余空间时，可能延迟触发或直接忽略；Chrome 则倾向提前分页，导致末页留白多。这不是 bug，是 Fragmentation Level 3 规范实现节奏不同。
- 章节标题、报告封面等「必须新开一页」的位置，优先用
break-before: page—— Firefox 对它支持最稳 - 若必须用
break-after，改用break-after: always（而非page），它在 Firefox 和 Safari 中兼容性更好 - 别直接写在
<section></section>或<div> 上，先套一层语义化容器（如 <code><article></article>），再通过类名控制，减少浏览器对匿名块的处理歧义 - 用
@supports (break-after: always)包裹规则，确保老浏览器降级到page-break-after: always - 确保
@media print规则写在主样式表里，或用<link rel="stylesheet" media="print">单独引入 - 禁用开发者工具里的「强制打印样式」模拟，那只是视觉预览，不代表真实
window.print()行为 - Chrome 打印设置右上角 → 「更多设置」→ 关闭「背景图形」，否则
background: transparent !important都救不了 - 避免泛用
!important，优先提升选择器特异性，比如用body.print-ready main h2而不是h2
打印预览正常但 Ctrl+P 输出异常？检查 @media print 加载时机和覆盖逻辑
很多问题不是样式写错了，而是没被真正应用：CSS-in-JS 库（如 styled-components）默认不注入 @media print 规则；!important 在打印上下文中权重更高，反而容易反向干扰；Chrome「背景图形」开关也会无视你的 background 设置。
最容易被忽略的一点：所有分页控制都依赖「容器在文档流中」这个前提。一旦你用了 float、position: fixed、display: flex/grid 且没做流内兜底，break-* 属性就只是摆设。别调样式，先调结构。
