flex 布局在打印中失效，因打印引擎不解析 display: flex 语义；应降级为 block 或 inline-block 布局，并对子项显式设置 break-inside: avoid，同时清除浮动、避免 overflow/transform 等干扰样式。
Flex 布局在打印预览里被劈开、卡片错位、页脚消失——不是你代码写错了，而是打印引擎根本不管 display: flex 的语义，它只认块级流和显式断页指令。
为什么给 flex 容器加 break-inside: avoid 没用
浏览器打印时压根不解析 flex 容器的分页声明。break-inside: avoid 只对块级元素生效，而 flex 子项是 flex-item，不属于标准块格式化上下文（BFC）。你在 .card-list { display: flex; break-inside: avoid; } 上写的这条规则，Chrome 和 Firefox 都会静默忽略。
- 必须把
break-inside: avoid加到每个要整页显示的子项上，比如.card、.report-row - 如果子项内部还有标题、段落，它们也得各自加
break-inside: avoid，否则断点会落在文字中间 -
page-break-inside: avoid在现代浏览器中已废弃，别混用
Flex 子项加了 break-inside 还被截断的常见干扰项
即使你正确加了 break-inside: avoid，以下样式会让它彻底失效：
-
overflow: hidden：切断分页上下文，浏览器宁可留白也不拆，但内容超长时仍会被截 -
transform或position: absolute：让元素脱离文档流，分页锚点无处可锚 -
height或max-height限制：若实际内容高度超过 A4 纵向约 850px（扣除边距），依然会断 - 没包裹在
@media print里：屏幕渲染可能受影响，且部分浏览器只在 print 媒体中解析该属性
更稳妥的做法：在打印时降级为 block 布局
Flex 是为屏幕交互设计的，打印引擎对它的支持不可靠。与其硬塞分页指令，不如主动切换布局模式：
- 在
@media print中重置容器：.card-grid { display: block !important; } - 子项设为
display: block并加break-inside: avoid - 需要并排效果？改用
display: inline-block+vertical-align: top，比 flex 更可控 - 删掉
gap（它在页尾会放大物理间距，挤走下一个子项），改用margin-bottom
浮动残留会让所有 break 规则集体失能
哪怕只有一处 float: left 没清掉，整个打印分页逻辑就可能崩塌——因为浮动让布局失去可预测性。
- 统一加
float: none !important到所有可能浮动的容器（如.sidebar、.ad-banner） - 配套加
clear: none !important，否则残留clear会制造意外空白 - 若原布局依赖浮动实现多栏，优先改用
display: flow-root替代浮动父容器，它既能包裹子项，又能让break-inside: avoid真正起作用
真正难处理的不是怎么加断页，而是让整个结构回归可预测的块级流——打印不是屏幕的缩小版，它是另一套渲染层，得用另一套规则来写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
