打印引擎忽略float的脱离文档流语义是规范行为而非bug；需在@media print中对浮动元素及其父容器统一重置float:none、clear:none、width:100%、display:block，并用flow-root替代浮动父容器以恢复断页控制。
打印引擎根本不处理 float 的脱离文档流语义
这不是渲染 bug，是规范行为。Chrome、Edge（PDF 导出）、Firefox 的打印引擎在构建分页文档时，会直接忽略 float 的布局语义——它不参与文档流重建，也不触发 BFC，更不响应 clear 或断页指令。你看到的“错位”，其实是浮动元素被强制回退为默认块级行为，但尺寸、内外边距、流向全没重置，导致内容堆叠、表格塌陷、页脚飘到中间。
@media print 中只写 float: none 还不够
必须配套清理所有残留影响：
-
float: none !important要加在所有可能浮动的容器上（如.sidebar、.invoice-header、.ad-banner） -
clear: none !important必须同步加，否则残留的clear: both会在无浮动上下文中制造意外空白 -
width: 100% !important和display: block !important得补上，避免原width: 50%导致窄列挤在一起 - 如果父容器本身是浮动的（比如表格套在
.float-wrapper里），先清它的浮动，再调内部table样式，顺序反了就白忙
page-break-after 加在 float 元素上等于没写
page-break-after: always 的作用对象是「文档流内的块级框位置」，而浮动元素已脱离该流。浏览器找不到锚点，指令就被静默忽略。真正可控的位置只有：
- 清除浮动后的块级容器末尾，例如：
.invoice-section { break-after: page !important; } - 用
display: flow-root替代原浮动父容器，它既保持包裹效果，又让break-inside: avoid等属性生效 - 老项目无法重构时，可在浮动块后插入一个透明锚点：
<div class="print-break"></div>，并在@media print中设.print-break { height: 0; overflow: hidden; break-after: page; }
表格错位往往不是 table 的问题，而是它前面那个 float 父容器
常见错误是只给 <table> 加 clear: both，但没效果——因为 table 默认是 display: table，不是块级元素，clear 对它无效。真正要动手的是它的父级：
立即学习“前端免费学习笔记（深入）”；
- 在
@media print中重置：.float-wrapper { float: none !important; width: auto !important; } - 再给这个父容器加
display: flow-root，确保它能正确包裹内容并响应break-inside: avoid - 同时重写表格样式：
table { table-layout: auto !important; width: 100% !important; }，禁用组件库默认的table-layout: fixed -
colgroup在打印中基本被忽略，改用tbody tr:first-child td配合min-width控制列宽
float 比调试一百行 @media print 更快。真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处 float 残留，都可能让后续所有 break- 规则集体失能。 
