必须同步重设 width、box-sizing 并清除浮动才能使 float: none 在小屏生效；推荐移动端优先，用 min-width 媒体查询启用桌面浮动布局；浮动与定位混用时应重构为 flex 或 grid。
只改 float 值会失效，必须同步重设 width 和 box-sizing
小屏下 float: none 看似生效，但元素仍卡在桌面端的 width: 33.33%，导致单列却只占三分之一；更糟的是，若没统一 box-sizing: border-box，加上 padding: 16px 后实际宽度 = 33.33% + 32px，直接溢出容器。常见现象包括错位、换行异常、横向滚动条。解决办法不是“多加一条规则”，而是把这四件事写进同一组媒体查询里：
- 显式声明
float: none（不能依赖初始值） - 重设
width: 100%或max-width: 100% - 确保父容器有清除机制：
overflow: hidden或display: flow-root - 所有浮动项统一加
box-sizing: border-box（断点内外都要）
用 @media (min-width: ...) 而非 max-width 更稳
移动端优先是硬性要求。@media (max-width: 768px) 容易被更高优先级规则覆盖；而 @media (min-width: 769px) 明确表达“仅在桌面增强”，逻辑更清晰。推荐写法：
默认样式（无媒体查询）设为 float: none; width: 100%；只在 >= 769px 时启用浮动布局：@media (min-width: 769px) { .item { float: left; width: 50%; } }。这样避免小屏样式被意外覆盖，也符合 Bootstrap/Tailwind 的断点习惯。
float 和 position / transform 混用时切换会出层叠问题
如果浮动元素内部用了 position: relative + z-index，或外层套了 transform，切到 float: none 后可能触发新的层叠上下文，导致遮挡或偏移——这种耦合越深，越难靠样式补丁修好。此时重构为 display: flex 或 display: grid 反而更快，尤其当项目已放弃 IE8–9 兼容时。
真正难处理的不是“怎么换行”，而是旧代码里浮动和其他定位深度耦合
比如 .card 既 float: left 又 position: absolute，还套着 transform: scale(0.95)；这类结构在媒体查询里强行切 float: none，往往只是掩盖问题，后续维护成本陡增。这时候花 20 分钟重写成 display: flex; flex-wrap: wrap，比调试 2 小时样式覆盖链更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
