css浮动在打印中并非失效，而是被pdf引擎直接忽略其脱离文档流语义；必须重置float、clear并设width:100%，或改用display:flow-root使容器回归文档流，才能确保break-after等分页属性生效。

印刷版 CSS（即 @media print）中，float 不是“失效”，而是被 PDF 打印引擎直接忽略其脱离文档流的语义——它压根不处理浮动逻辑，只按块级流式布局渲染。你看到的错位、重叠、页脚跑位，不是样式没生效，是引擎根本没执行 float 的排版规则。

@media print 中必须重置 float、clear 和 width

不能只写 float: none !important 就完事。残留的 clear 和窄 width 会继续破坏打印流：

• 所有可能浮动的容器（如 .sidebar、.invoice-header）统一加 float: none !important
• 配套设 clear: none !important，否则 clear: both 在无浮动上下文中会制造意外空白
• 加 width: 100% !important，避免原 width: 50% 导致文字挤成窄列、换行异常

page-break-after 对 float 元素完全无效

page-break-after: always 只作用于正常文档流中的块级元素。浮动元素已脱离流，Chrome/Edge/Firefox 的打印引擎都会静默跳过该声明：

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

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

下载

• 错误写法：.section { float: left; page-break-after: always; } —— 预览里毫无反应
• 真正起效的前提：目标元素必须是 position: static 或 relative，且未脱离流
• <tr>、<code>display: flex 子项、position: absolute 元素同样不支持分页属性

  display: flow-root 是最可靠的替代方案

  把浮动容器改成 display: flow-root，既能包裹子项，又让容器留在文档流中，break-after: page 才真正起效：

  • 移除所有 float 和配套的 ::after 清除伪类
  • 给容器设 display: flow-root; break-after: page;
  • 内部子项改用 display: inline-block 或 display: flex 排列
  • 兼容性注意：flow-root 在 Chrome 64+/Firefox 58+ 稳定支持；IE 不支持，但 IE 本身也不支持现代分页属性

  真正难处理的不是怎么加断页，而是浮动让整个打印布局失去可预测性——哪怕只有一处 float 残留，都可能让后续所有 break-inside: avoid 失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！