直接结论：在媒体查询中必须显式设置 float: none、width: 100% 和 margin: 0（或重置），浮动元素才能真正回归文档流并垂直堆叠；仅用 clear: both 无效，因其仅避让而非取消浮动。
直接结论：在媒体查询里把 float 显式设为 none，再配合 width: 100% 和 margin: 0，浮动元素才会真正回归文档流、垂直堆叠——只加 clear: both 没用，它不取消浮动本身。
为什么只写 clear: both 在媒体查询里无效
因为 clear 只控制「当前元素自身」避开前面的浮动，它不会让已经脱离文档流的浮动元素重新归位。小屏下你看到的错位、重叠或溢出，根源是 float: left 还在生效，只是被 clear 挡了一下后续内容而已。父容器高度依然塌陷，背景和边框照样不显示。
常见错误写法：
.item { float: left; }
@media (max-width: 768px) {
.item { clear: both; } /* ❌ 没取消 float，元素还在“飘” */
}
-
clear是“避让指令”，不是“归位指令” - 浮动元素 DOM 位置没变，但渲染位置已脱离流，
clear找不到可作用的上下文 - 如果浮动项之间有
margin-right，小屏下不重置会撑破容器
float: none 必须显式写出，且要配齐三要素
取消浮动不是单点操作，而是三个样式必须同步更新，缺一不可：
-
float: none：强制退出浮动状态，回归块级流 -
width: 100%：避免默认width: auto导致内容收缩或撑开（尤其当原布局用width: 50%时） -
margin: 0或针对性重置（如margin-right: 0）：清除原浮动带来的外边距残留，防止换行后留白或错位
正确写法示例：
@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 { overflow: hidden; } }或@media { .tag-list { display: flow-root; } }
更稳妥的做法是：对所有浮动容器统一加 display: flow-root（现代浏览器），它比 overflow: hidden 安全，不会裁剪 position: absolute 子元素。
移动端断点别硬写 768px，优先结合 orientation
iPad 横屏逻辑像素宽常是 1024，但竖屏就是 768；iPhone SE 第三代 CSS 像素宽仅 375。只靠 max-width: 768px 会漏掉很多真实场景。
推荐写法：
@media (max-width: 480px), (max-width: 768px) and (orientation: portrait) {
.sidebar, .main { float: none; width: 100%; }
}
- 用
orientation: portrait比固定数值更能抓住“真小屏”意图 - 避免嵌套
@media (min-width) and (max-width)，部分旧 WebView 解析不稳定 - 不要对
body或根容器设overflow: hidden，会锁死页面滚动
最后提醒：浮动 + 媒体查询仍是可用方案，但只要项目允许，display: flex 配合 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) 才是真正省心、少坑的响应式路径。浮动的“掉队”“塌陷”“负 margin 偏移”，本质上都是它脱离文档流带来的副作用，修起来永远是补丁套补丁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
