根本原因是打印引擎（如chrome/edge）不处理float和clear的流式语义，只认文档流内的块级位置；清除浮动须在@media print中显式重置为display: flow-root、插入.clear元素或禁用float并用flex/table重构。
打印预览中浮动布局重叠，根本原因不是样式没生效，而是打印引擎（尤其是 Chrome/Edge 的 PDF 导出）压根不处理 float 和 clear 的流式语义——它只认文档流内的块级位置。你看到的“重叠”，其实是内容被错误地堆在了同一物理页区域，而非屏幕渲染时的视觉错位。
为什么 clear: both 在打印中经常失效
在屏幕端，clear: both 会让元素下移避开浮动；但在打印流程里，这个指令常被忽略或延迟解析，尤其当它出现在浮动块之后、又没被包裹在可中断的块级上下文中时：
-
clear必须作用于**块级、非浮动、且处于正常文档流中的元素**，而打印引擎对“文档流”的判定比浏览器宽松得多 - 如果该元素本身有
display: inline或被父容器float了，clear就不会触发换行 - 多个连续的
clear: both可能被合并或跳过，导致中间内容“漏掉”断页 - Chrome 打印预览中，
clear对position: relative元素的支持极不稳定
overflow: hidden 在打印中会引发裁剪风险
虽然 overflow: hidden 能触发 BFC、让父容器包含浮动子项，但它在打印环境里副作用更明显：
- 任何超出父容器边界的子内容（比如带
box-shadow的卡片、transform: translateY(-5px)的标题）会被直接截断，PDF 中看不到 - 若浮动子项内含
position: absolute元素（如弹出提示、角标），它们大概率消失 - 某些旧版 Edge 打印引擎会把
overflow: hidden解析为“强制单页”，导致长内容被硬切、文字被截断 - 它无法配合
break-inside: avoid正常工作，父子容器都设了也常失效
真正能在打印中起效的清除方式
别指望复用屏幕样式，打印媒体查询里必须显式、独立、块级地重建流式控制：
- 所有浮动容器的直接父元素，统一加
display: flow-root+break-inside: avoid（Chrome 64+/Firefox 58+ 支持） - 在每个需分页的区块末尾，插入一个空
<div class="print-clear"></div>，并在@media print中定义：.print-clear { display: block; height: 0; clear: both; break-after: page; } - 禁用所有
float相关声明：在@media print中全局重置* { float: none !important; }，再用display: flex或display: table重构关键区域 - 若必须保留浮动结构（如第三方报表组件），就给每个浮动块加
page-break-inside: avoid，并确保其父容器有明确width: 100%和box-sizing: border-box
最易被忽略的一点：打印样式表里没有「继承」这回事。哪怕你在屏幕样式中写了完美的 .clearfix，只要没在 @media print 里重新声明，它就等于不存在。浮动在打印中不是“失效”，而是被彻底绕过——你得用它能理解的语言重写规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
