只加 clear: both 在媒体查询里没用，因为 clear: both 不是取消浮动，仅让当前元素避开上方浮动兄弟，而 float 本身仍在生效，导致小屏下错位、堆叠及父容器塌陷；必须同步重置 float: none、width: 100% 和 margin-right: 0 才能真正修复。
为什么只加 clear: both 在媒体查询里没用
因为 clear: both 不是“取消浮动”，它只是让当前元素避开上方已浮动的兄弟元素——float 本身还在生效，元素依然脱离文档流。小屏下你看到的错位、堆叠或父容器背景消失，根源是 float: left 没被真正关掉，只是后续内容被推开了而已。
常见错误写法：@media (max-width: 768px) { .item { clear: both; } }
这行代码什么都没修：.item 自己还在飘，DOM 位置没变，但渲染位置已脱离流，clear 找不到可作用的上下文。
@media 中必须同步重置的三个属性
要让浮动元素在小屏下真正回归垂直堆叠，不是单点操作，而是三者必须同时改：
-
float: none：强制退出浮动状态，这是前提 -
width: 100%：避免width: auto导致内容收缩或撑开（尤其原布局用width: 50%时） -
margin-right: 0（或完整重置margin）：清除原浮动带来的外边距残留，防止换行后右侧留白或错位
示例：@media (max-width: 768px) { .btn { float: none; width: 100%; margin-right: 0; } }width: 100% 比 width: auto 更可控；若用 max-width，需确认父容器是否设了 box-sizing: border-box，否则 padding/border 会额外加宽。
立即学习“前端免费学习笔记（深入）”；
浮动嵌套时，@media 规则该写在哪一层
浮动影响只作用于「直接父容器」，所以媒体查询不能只写在外层选择器里。比如 .sidebar 里嵌了 .tag-list，而 .tag-list 里又有浮动的 .tag：
-
.sidebar加@media→.tag-list内部仍塌陷 - 只给
.tag加@media→.tag-list父容器高度不恢复，背景/边框照样不显示 - 必须同时写：
@media { .sidebar { float: none; } }和@media { .tag-list { display: flow-root; } }
验证方法很简单：打开开发者工具，逐层选中父容器，看 Computed 面板里的 height 是否符合预期。如果某一层显示 height: 0，说明它没被正确重置。
打印样式里重置浮动要更彻底
Chrome 和 Edge 的 PDF 导出引擎压根不处理 float，它不是 bug，是规范行为。float: left 在打印预览中常被忽略，导致内容堆叠、页脚错位甚至整块消失。
必须在 @media print 中显式重置，且要带 !important：
- 所有可能浮动的容器统一加
float: none !important - 配套重置宽度：
width: 100% !important，避免残留width: 50%导致窄列挤在一起 - 清除历史遗留的
clear指令，它在无浮动上下文中反而制造空白间隙 - 若原布局依赖浮动实现多栏，这里就该切到
display: flex或display: table降级方案
真正难处理的不是怎么加断页，而是浮动让整个布局失去可预测性——哪怕只有一处 float 残留，都可能让后续所有 break- 规则集体失能。
