clear: both 在媒体查询中无效，因其仅让元素避开上方浮动兄弟，不解除浮动本身；小屏错位根源是 float 仍生效导致父容器塌陷，须同步重置 float: none、width: 100%、margin-right: 0 才能修复。
为什么只加 clear: both 在媒体查询里没用
因为 clear: both 不是“取消浮动”，而是让当前元素避开上方已浮动的兄弟——它不改变浮动元素自身脱离文档流的状态。小屏下你看到的错位、溢出或堆叠，根源是 float: left 还在生效，只是后续内容被挡了一下。父容器高度依然塌陷，背景、边框、内边距全失效。
常见错误写法：@media (max-width: 768px) { .item { clear: both; } }
这行代码什么都没修：.item 自己还在飘，只是它下面的元素被推开了而已。
- 浮动元素 DOM 位置没变，但渲染位置已脱离流，
clear找不到可作用的上下文 - 如果浮动项之间有
margin-right，小屏下不重置会撑破容器 -
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，说明它没被正确重置。
现代项目里别硬修 float，直接换布局模型
浮动本为图文环绕设计，拿它做响应式网格等于天天用螺丝刀拧螺丝——能转，但费劲还易滑丝。你花半天调 margin 和 clear，不如三行 CSS 切到 display: flex 或 display: grid。
- 删掉所有
float: left、clear: both、overflow: hidden补丁 - 父容器改
display: flex+flex-wrap: wrap，子项用flex: 1 1 300px控制最小宽度 - 需要二维定位（比如两栏+头部+底部）就上
display: grid，grid-template-areas比float+clear直观十倍
兼容性够用：display: flow-root（Chrome 58+/Firefox 57+/Safari 10.1+）已覆盖绝大多数场景；仅需支持 IE11 时，退回到 overflow: hidden 即可。
响应式下浮动换行更难调，因为断点会放大微小偏差：桌面端看着整齐的四列，移动端缩成两列时，常出现第一行两个按钮左对齐、第二行两个按钮右偏移——这不是 bug，是浮动在不同容器宽下重新计算贴边位置。真要可靠控换行节奏，优先用 flex-wrap: wrap 或 grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)))。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
