移动端图文重叠主因是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，文字换行异常，视觉上像“叠”在图上。
立即学习“前端免费学习笔记（深入）”；
- 给图片加
flex-shrink: 0防止被压缩，同时用max-width: 100%保响应性 - 文字容器设
min-width: 0（触发 flex item 的最小尺寸计算规则），避免因内部文本过长撑破布局 - 必要时用
flex-wrap: wrap+align-items: flex-start让图文在小屏自动换行而非硬挤
position: absolute 导致脱离文档流重叠
用 position: absolute 给图片定位时，它完全脱离文档流，文字不会为其留空，自然就“穿”过去了。这种写法在 PC 端可能凑合，但在移动端 viewport 缩放、字体放大等场景下极其脆弱。
错误模式：img { position: absolute; top: 0; left: 0; } + 后续
无任何偏移。
- 绝对定位只用于真正需要脱离流的装饰性元素（如角标、浮层），图文主体内容禁用
- 若需“图片左/右+文字环绕”，用
float+clear或更稳妥的display: grid（如grid-template-columns: 80px 1fr） - 检查是否误加了
z-index负值，让文字图层盖住了图片（虽不常见，但真有人这么干）
移动端 zoom 或 font-size 放大触发重叠
用户双指放大、系统启用“更大字体”辅助功能，或页面未设 viewport，都可能导致原本正常的布局突然重叠——因为文字实际占用高度/宽度远超 CSS 设定值，而图片尺寸却按原始 px 固定死。
关键信号：仅在 iOS 设置「显示→文字大小」调大后复现，或 chrome DevTools 切换「Large text」模拟模式时出问题。
- 必须声明标准
viewport： - 避免对文字容器使用固定
height，改用min-height或让行高由内容撑开 - 图片用
width: 100%+height: auto，而非固定像素宽高，否则放大时会裁切或拉伸
实际中最容易被忽略的是：你以为清除了浮动，但父容器用了 display: flex，此时 clear 根本无效；或者你写了 flex-wrap: wrap，却忘了给子项设 flex-basis，结果小屏下还是挤成一行。这些细节一漏，重叠就回来。