打印预览中float元素乱飘，是因为Chrome、Edge的PDF打印引擎直接忽略float脱离文档流语义，导致浮动元素回退为普通块级行为但未重置尺寸与清除逻辑；必须在@media print中对所有浮动容器显式设float: none !important并配套重置width、clear等样式，改用flex或table布局替代浮动，且断页控制需作用于清除后的块级容器而非浮动元素本身。
打印预览中 float 元素乱飘，是因为浏览器根本没处理它
Chrome、Edge 的打印引擎（PDF backend）不解析 float 的脱离文档流语义——不是渲染错，是直接跳过。你看到的“错位”，其实是浮动元素被强制回退为普通块级行为，但尺寸、流向、清除逻辑全没重置，导致表格塌陷、文字堆叠、页脚卡在中间。
@media print 中必须显式设 float: none !important
别试图保留 float: left 再微调 margin，那只会让结果更不可控。所有可能浮动的容器都得在打印样式里「重新声明」并清空：
- 统一加
float: none !important到常见浮动类，比如.sidebar、.ad-banner、.nav-item - 配套重置宽度：
width: 100% !important，避免残留width: 50%导致窄列挤在一起 - 顺手清掉
clear: both等历史指令：clear: none !important，否则可能制造意外空白 - 若原布局靠浮动实现多列，现在必须改用
display: flex或display: table降级方案
浮动表格错位？动手点不在 <table>，而在它的父容器
常见错误是只给 <table> 加 clear: both，但无效——因为 <table> 默认是 display: table，不是块级元素，clear 对它不生效。真正要改的是包裹它的父级：
- 查 DOM：找出那个
<div class="float-wrapper">，它大概率有float: left - 在
@media print中重置：.float-wrapper { float: none !important; width: auto !important; } - 再加
display: flow-root !important，确保它能正确包裹内容并响应break-inside: avoid
page-break-after 加在 float 元素上基本等于没写
打印引擎不把浮动元素当文档流内节点，断页指令找不到锚点。真正可控的位置只有：
立即学习“前端免费学习笔记（深入）”；
- 清除浮动后的块级容器末尾，比如：
.invoice-section { break-after: page !important; } - 表格本身加
break-inside: avoid !important防跨页截断（注意 IE 不支持） - 用
@page控制页眉页脚，而不是靠position: fixed+float硬塞
浮动是屏幕时代的 hack，打印时还留着它，等于主动放弃排版控制权。删掉 float 比调试一百行 @media print 更快。真正容易被忽略的，是那些没被 display: flow-root 或 clearfix 覆盖到的嵌套浮动父容器——它们只要漏一个，后续所有断页规则就集体失能。
