根本原因是打印引擎下浮动元素未清除导致父容器高度塌陷为0，使后续内容被挤至下一页，当前页仅剩header或空背景。
打印预览里浮动元素导致整页空白，根本原因是什么
不是“页面内容没出来”，而是浏览器在打印模式下对 float 的处理逻辑变了：当父容器高度依赖浮动子元素撑开，而你又没做任何清除或 BFC 触发时，打印引擎可能直接把父容器渲染成 0 高度——后续内容被挤到下一页，当前页就只剩 header 或空背景，看起来像“空白页”。IE8–9 更明显，但 Chrome/Firefox 在某些嵌套结构下也会复现。
print 媒体查询中必须设 float: none 吗
必须。浮动在打印场景下几乎毫无意义，反而会放大塌陷问题。不重置就会继承屏幕样式，导致布局错乱或内容丢失。
-
float: left或float: right在打印时不会自动换行对齐，常造成文字截断或元素溢出纸张边界 - 即使你用了
clear: both，它只影响流内位置，不修复父容器塌陷——打印引擎仍可能跳过该区域 - 所有参与打印的浮动元素（包括图片、侧边栏、广告位）都应在
@media print中显式写float: none
示例：
@media print {
.sidebar, .ad-banner, img.float-right {
float: none;
width: 100%;
margin: 0 auto;
}
}
clear 在 print 媒体查询里怎么用才不白写
clear 只有在目标元素是块级且紧跟浮动元素之后时才生效。打印样式里乱加 clear: both 很容易被忽略——因为前面的浮动已经被 float: none 干掉了，清了个空。
- 先确保已重置所有浮动：
float: none是前置动作，clear是收尾动作 -
clear应该加在原本受浮动影响的兄弟块上，比如正文段落、表格容器，而不是浮动元素自己 - 如果父容器已用
display: flow-root或overflow: hidden包裹浮动，打印时也得重复声明——媒体查询不继承这些
典型错误写法：.container { clear: both; }（容器没浮动，清什么？）
正确写法：.article-content { clear: both; }（假设它紧接在已重置的浮动图之后）
比 clear 更稳的打印布局方案
别在 print 里跟浮动纠缠。现代做法是直接切到语义化、无塌陷风险的布局模型。
- 对多列内容（如图文混排），用
display: flex+flex-direction: column，打印时天然垂直堆叠 - 对复杂网格（如数据报表），用
display: grid并配@page分页控制，避免跨页断裂 - 所有图片、图表统一设
max-width: 100%; height: auto;，防止超宽触发横向滚动或空白页
关键点：打印样式表里，float 不该存在；clear 只是过渡手段；真正省心的是从根上放弃它。
最容易被忽略的是：哪怕你写了完整的 print 样式，只要 HTML 结构里还留着 float 内联样式或未覆盖的第三方 CSS，它就可能偷偷生效。检查 computed 样式里的 float 值，别信“我明明清掉了”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
