float: none 单独写进 @media 无效，因未同步重置 width、margin 和父容器高度；须三者同改，并推荐改用 flex 或 grid 布局替代浮动。
float: none 单独写进 @media 里为什么没用
因为 float: none 只是把元素塞回文档流，不重算尺寸、不修复塌陷、也不清理它之前留下的布局“伤疤”。你看到的错位、空白、内容叠在一起，不是样式没生效，而是 width、margin、父容器高度全还卡在 PC 端状态。
@media 中必须同步改的三个属性
只改 float 是无效操作。这三样得一起进媒体查询，缺一不可：
-
float: none：显式声明，不能靠继承或初始值 -
width: 100%或max-width: 100%：原width: 33.33%或width: 200px不删，小屏下照样占三分之一或撑破容器 -
margin-right: 0（或完整重置margin）：PC 端靠margin-right模拟间隙，小屏堆叠时这值会变成右侧大片空白
父容器高度塌陷必须手动补救
浮动元素一消失，父容器大概率变 height: 0，背景、边框、内边距全失效。这不是 float: none 的错，是你没告诉父容器“现在该自己算高了”：
- 加
display: flow-root最干净，现代浏览器都支持 - 退而求其次用
overflow: hidden，但注意可能意外裁掉position: absolute的下拉菜单 - 别用伪元素
::after { clear: both }—— 它依赖浮动上下文，而你刚把浮动干掉了
更省事的解法：直接换布局模型
与其在 float 和 none 之间反复调试，不如在媒体查询里切到现代方案：
立即学习“前端免费学习笔记（深入）”；
- 小屏用
display: flex; flex-direction: column，天然垂直堆叠，不用清、不用算宽 - 中大屏再切回
display: grid，列数、间距、对齐全由 grid-template-columns 控制 - 如果项目里已有
display: flex父容器，子元素上的float全是摆设，直接删掉更安全
真正难的不是写对媒体查询，而是确认那个 float 还有没有参与实际布局——很多项目里它早被 flex 替代了，只是没人敢删。
