page-break-after 对 float 元素无效是规范行为，因浮动元素脱离文档流，浏览器分页时直接忽略；应改用 display: flow-root 或插入流内锚点解决。
page-break-after 对 float 元素完全无效是规范行为，不是 bug
你写了 page-break-after: always 却没效果，不是浏览器不支持，而是 CSS 规范明确限定：该属性只对处于正常文档流中的块级元素生效。浮动元素（float: left 或 float: right）已脱离流，浏览器在分页计算时直接跳过它——Chrome、Edge、Firefox 在 PDF 导出和打印预览中都会静默忽略这类声明。
常见错误写法：.section { float: left; page-break-after: always; }，哪怕加了 !important 也没用。更隐蔽的问题是：它可能在旧版 Firefox 中“偶然”起作用，导致你误以为逻辑成立，结果上线后在主流浏览器里全部失效。
用 display: flow-root 替代 float 是最直接有效的解法
只要能改 HTML/CSS 结构，就该优先移除浮动，改用现代 BFC 创建方式。它保留包裹能力（如清除子浮动），又让容器留在文档流中，使分页控制真正可作用。
- 删掉所有
float、clear及伪类::after清除代码 - 给原浮动容器设
display: flow-root和break-after: page - 内部子项改用
display: inline-block或display: flex排列，避免再引入新浮动 - 若需兼容 IE，可跳过——IE 不支持
break-after，强行降级只会增加不可控行为
对比示例：
立即学习“前端免费学习笔记（深入）”；
/* 危险写法 */
.invoice-item { float: left; width: 50%; }
.invoice-footer { clear: both; page-break-after: always; }
<p>/<em> 安全写法 </em>/
.invoice-section { display: flow-root; break-after: page; }
.invoice-item { display: inline-block; width: 49%; vertical-align: top; }
实在无法改结构？插入流内锚点兜底
当使用第三方组件、CMS 模板或强约束遗留系统，HTML 结构锁死、CSS 无法动 float 时，唯一可靠做法是在浮动块之后插入一个独立的、无内容但受控的块级锚点。
- 锚点必须是
position: static（默认）、未脱离流的块级元素，例如<div class="print-break"></div> - 给它设
page-break-before: always（比page-break-after更稳定）和height: 0; overflow: hidden;避免视觉干扰 - 确保它紧跟在浮动容器后，中间不能有
clear或其他影响流的样式 - 不要试图给浮动元素本身加
break-inside: avoid——它对脱离流的元素无效
绝对定位、Flex/Grid 子项也面临同样问题
所有脱离文档流的元素——包括 position: absolute、display: flex 或 display: grid 的直接子项——都共享同一个分页失效逻辑。它们不会响应 break-after、break-inside 等属性。
解决思路一致：要么回归流式上下文（比如把 absolute 改成 relative，给 grid 容器的子项显式加 display: block），要么用流式 wrapper 包裹后再控制分页。别指望靠属性叠加绕过规范限制。
最容易被忽略的一点是：分页控制必须放在 @media print 块内，且要配合父容器的 BFC 状态；否则即使写对了属性，也可能因外层容器未形成块格式化上下文而失效。
