移动端浮动断行问题须同步处理float: none、清除逻辑和bfc触发，单改width无效；正确断点用min-width而非max-width；推荐弃用浮动，改用flex布局实现响应式断行。
移动端浮动断行问题不能靠调百分比宽度解决，媒体查询改width只是表象，真正要动的是清除逻辑、盒模型和断点方向。
为什么改width: 50%到width: 100%还是换行错乱
因为浮动元素脱离文档流，改宽度不等于重置布局上下文。你设了width: 100%，但没同步处理float: none、clear和父容器是否触发BFC，结果就是：元素视觉上变宽了，但依然“浮”在旧位置，甚至因box-sizing未统一导致实际宽度超100%，直接溢出换行。
- 必须显式写
float: none，不能只改width——否则浏览器仍按浮动规则计算行盒 - 父容器若没加
clearfix或overflow: hidden，旧的塌陷状态会残留，新宽度下错位更明显 -
width: 50%+padding: 10px在box-sizing: content-box下实际占宽>100%，移动端窄屏一触即崩
@media (min-width: 768px)才是正确断点写法
用max-width是典型反模式。比如写@media (max-width: 767px)，一旦设备视口恰好是768px（如iPad竖屏、部分安卓平板），规则完全不生效，两栏直接挤成一行还溢出——这不是bug，是CSS层叠机制决定的。
- 移动优先要求：默认写小屏样式（块状堆叠），再用
min-width增强为并排 -
@media (min-width: 480px)已覆盖绝大多数竖屏手机，不必为iPhone SE(320px)单独设断点 - 避免
@media (min-width: 768px) and (max-width: 1023px)这种套嵌，易被解析为false positive
浮动断行修复必须配齐三件套
单改一个属性大概率白忙。每个断点里，只要列数变化（比如2栏→1栏），就得同时动这三项：
- 子项：加
float: none+width: 100%+box-sizing: border-box - 父容器：加
clearfix类或overflow: hidden（注意会裁剪position: absolute内容） - 关键间隙：用
margin替代padding控制间距，因浮动元素的padding会参与宽度计算，margin不会
真要省事就别用浮动
纯浮动做不到“屏幕一缩就自动从4列→2列→1列”。你只能手动定义几个断点，每档写死列宽和清除逻辑。而display: flex天然支持flex-wrap和flex-basis响应，删掉所有float/clear声明，加display: flex和flex-direction: column，移动端断行问题就没了——前提是JS里没硬编码读取offsetTop或依赖浮动脱离文档流做定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
