clear不能用来换页，因其仅控制浮动元素的布局流，不参与分页逻辑；打印换页应使用break-before、break-after等分页属性。
clear 属性本身不控制打印换页，它只影响浮动元素的布局流，和分页逻辑无关。试图用 clear: both 强制“换页”是常见误解——它只会让元素避开浮动，但不会触发新一页。
clear 在打印场景中为什么不能用来换页？
-
clear的作用域仅限于块级元素的上边界定位，目标是避开前面同级的float: left或float: right元素 - 打印分页由
break-before、break-after、break-inside或旧式page-break-*控制，这些属性与浮动清除机制完全正交 - 即使页面中有浮动广告栏，加了
clear: both的段落仍会留在当前页，除非它自然溢出到下一页
常见误判现象：
- 看到某段文字“掉到了下一页”，以为是
clear导致的——其实是该段前有大图/表格撑满本页，加上clear后又多占了一行空白，被动推下去 - 在
@media print里给span加clear: both，结果毫无反应——因为clear对内联元素无效，且打印样式里更不该依赖浮动布局
打印换页该用什么？直接上有效组合
- 用
break-before: page强制从新页开始（推荐） - 备选：
page-break-before: always（兼容老浏览器，但 Chrome 100+ 已基本忽略） - 防止内容被撕裂：对整块结构（如卡片、报表节）设
break-inside: avoid - 表格整体不跨页：外层
div包裹table，并对该div设break-inside: avoid
必须注意：
-
break-before只对块级盒生效，别加在<span></span>、<em></em>或display: inline元素上 - 父容器若含
overflow: hidden、transform、filter，会截断分页上下文，导致属性失效 -
@media print规则要写在内独立<style></style>中，且关键声明建议加!important
为什么有人觉得 clear “好像能换页”？
典型混淆场景：
- 页面左侧有
float: left的导航栏，正文用clear: both后“看起来像换页了”——实际只是正文被压到浮动区下方，如果浮动区很高，正文起始位置就接近页面底部，稍一加内容就自然滚到下一页 - 把
clear和page-break-after: always混写在同一元素上，误以为是clear起效
真正需要换页时，别绕弯子。直接插入一个空 div 并设：
@media print { .force-page-break { break-before: page; } }
然后在 HTML 里：<div class="force-page-break"></div>打印分页的底层逻辑是物理纸张约束，不是布局流重排——clear 解决不了这个问题，也从来不是为它设计的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
