移动端图文重叠主因是float未清除、flex子项未约束、absolute脱离流、zoom放大导致尺寸失衡；应弃用float改用flex/grid，图片设flex-shrink:0和max-width:100%，文字容器设min-width:0，必加viewport声明。
图片浮动导致文字环绕重叠
移动端 CSS 中，float 是最常引发文字与图片重叠的元凶——尤其当图片设了 float: left 但后续文字内容没做清除时，文字会紧贴图片右侧（或下方）流动，而视口变窄后空间不足，直接压上去。
常见错误写法：
这是一段说明文字...
，在 iPhone SE 等小屏上极易重叠。
- 优先弃用
float布局：它本就不适合响应式场景，现代布局应改用display: flex或display: grid - 若必须保留
float（如兼容老项目），务必在文字容器上加clear: both，而不是依赖父容器的overflow: hidden（后者在 iOS Safari 中有渲染 bug） - 对图片本身加
max-width: 100%和height: auto，防止其宽度超出容器挤压文字流
flex 布局下图文错位或塌陷
用 display: flex 替代浮动后，仍可能因未约束子项行为导致重叠——比如图片未设 flex-shrink: 0，在小屏下被压缩变形，文字容器又没设 min-width，最终挤作一团。
典型问题代码：.container { display: flex; } img { width: 200px; } p { flex: 1; } —— 在 320px 宽屏幕上，img 仍强行占 200px，p 只剩 120px，文字换行异常，视觉上像“叠”在图上。
立即学习“前端免费学习笔记（深入）”；
