打印时浮动元素被浏览器跳过解析，导致错位、截断等问题；应彻底移除浮动并改用flow-root或空锚点+break-after等现代分页方案。
因为现代浏览器的打印引擎（尤其是 Chrome 和 Edge 的 PDF backend）压根不处理 float 的脱离文档流语义——这不是 bug，是规范行为。你看到的错位、堆叠、截断、页脚上浮，全是它被强制回退为普通块级元素后，尺寸、clear、宽度全没重置的结果。
浮动在打印中根本不是“失效”，而是被跳过
打印流程不解析 float: left 或 clear: both 的布局意图。它不会尝试模拟图文环绕，也不会重建浮动上下文。结果就是：元素还在 DOM 里，但浏览器直接按默认块级行为渲染，且不继承原 width、margin、clear 状态。常见现象包括：
-
.sidebar { float: right; }在打印预览中跑到正文下方，甚至被截断到下一页 -
.invoice-header { float: left; }缩成一条线或完全消失 - 给浮动容器加
page-break-after: always完全没反应
@media print 中只写 float: none 不够
光加 float: none !important 只是起点。残留的副作用会继续干扰分页和流式布局：
- 原
width: 50%没重置 → 多列挤成窄条，文字疯狂换行 - 残留
clear: both→ 在无浮动上下文中制造意外空白，撑开多余页 - 父容器仍用
overflow: hidden或position: relative→break-inside: avoid失效，表格行被撕裂跨页
真正起作用的不是“修浮动”，而是“删浮动+换模型”
浮动本就是为屏幕图文环绕设计的 hack，打印时还留着它，等于主动放弃控制权。更可靠的做法是：
- 能改 HTML 就把浮动父容器换成
display: flow-root—— 它天然包裹子项、留在文档流中，break-after: page才真正生效 - 老项目动不了结构？就在浮动块后插入一个空锚点：
<div class="print-break"></div>，并在@media print中设.print-break { height: 0; overflow: hidden; break-after: page; } - 表格错位？别只调
<table>，先清它的父容器浮动；再把 <code>table-layout: fixed改成auto最容易被忽略的，是那些嵌套在多重浮动容器里的内容——漏掉任意一层
float: none或没清理clear，都可能让后续所有分页规则集体失能。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
