打印时仅设 float: none 会出问题，因打印引擎跳过浮动脱离文档流逻辑，需同时重置 float: none、clear: none 和 width: 100% 三项，并对伪元素及 box-sizing 等关键属性在 @media print 中显式声明。
为什么只写 float: none 会出问题
打印引擎（Chrome/Edge 的 PDF 导出、Firefox 的打印预览）压根不执行浮动的脱离文档流逻辑——它不是“失效”，而是直接跳过。你看到的空白页、内容错位、页脚跑到中间，往往是因为：float: left 元素被强制回退为块级行为，但没重置 width、clear 和盒模型，导致文字挤成窄列、段落堆叠、父容器高度仍为 0。
@media print 中必须同时重置的三项
不能只靠 float: none !important 单打独斗。以下三者必须成套出现，缺一不可：
-
float: none !important：作用于所有可能浮动的类，如.sidebar、.ad-banner、.invoice-header -
clear: none !important：否则残留的clear: both会在无浮动上下文中制造意外空白（尤其在正文段落前） -
width: 100% !important：避免原width: 50%或width: 200px导致内容横向溢出或换行异常
哪些元素必须加，哪些可以跳过
重点不是“所有浮动元素”，而是“所有参与打印输出的浮动元素”：
- 必须加：
img.float-right、.logo-wrapper、.contact-card——只要它们出现在main或.print-content区域内 - 可跳过：
.nav-item、.mobile-menu-toggle——这些通常已在@media print { display: none }中隐藏 - 别漏掉伪元素：
::before或::after若含float（比如某些图标生成方式），也得单独重置
比重置更稳的替代方案
如果能改 HTML 结构，优先把浮动容器换成 display: flow-root：
- 它天然创建 BFC，包裹浮动子项，且不裁剪
box-shadow或干扰position: fixed - 配合
break-inside: avoid !important，分页控制才真正生效（page-break-after对浮动元素完全无效） - 注意兼容性：Safari 12.1+ 支持，IE 不支持；若需兼容旧版，保留
overflow: hiddenfallback 即可
真正容易被忽略的是：打印样式里没有“继承”这回事。哪怕你在屏幕样式中写了 * { box-sizing: border-box }，打印时也得在 @media print 里再写一遍 * { box-sizing: border-box !important }——否则 padding 会撑出纸张边界，表格直接被截断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
