小屏下浮动图片遮挡正文的根源是未在媒体查询中显式取消float，必须添加float: none并确保优先级；更优解是用flex替代float，小屏设flex-direction: column实现自然回流。
浮动图片在小屏下遮挡正文，本质是脱离文档流 + 响应式断点未重置浮动
直接取消 float 就行——不是调 z-index 或加 margin，而是让图片回归文档流。小屏下图文混排既难控制又无必要，强行保留浮动只会导致文字被挤到图下方、甚至被截断或覆盖按钮。
媒体查询里必须显式取消 float，不能只靠 width 改变
很多人写了 @media (max-width: 768px) { .image { width: 100%; } }，但忘了重置 float。只要 float: left 还在，浏览器就继续把它当“脱离流”的元素处理，文字仍会尝试绕行，而窄屏根本没空间绕，结果就是文字堆叠、错位、点击区域失效。
- 务必在断点中加
float: none，且优先级要盖过原样式（比如写在原规则之后，或加!important仅作兜底） - 如果图片父容器用了
overflow: hidden清除浮动，小屏下也建议同步改为display: flow-root，避免因高度塌陷引发的布局跳动 - 检查是否误用了
clear: both在后续段落上——小屏下浮动已取消，clear反而会制造额外空白
更可靠的现代替代：用 flex 替代 float 实现响应式图文对齐
与其反复修补 float 的响应式行为，不如一步到位换掉它。flex 天然支持“图片固定宽、文字自适应”且不脱离流，小屏自动回流，无需断点干预。
- 父容器设
display: flex; align-items: flex-start; - 图片加
flex-shrink: 0;（或flex: none），防止被压缩 - 文字容器设
flex: 1; min-width: 0;，配合overflow: hidden防止长单词撑破布局 - 小屏下只需加
flex-direction: column;，图文就自然上下排列，完全规避遮挡问题
容易被忽略的细节：浮动生命周期和 clear 的残留影响
哪怕你已在媒体查询里关掉了 float，如果之前用 ::after 伪元素清除浮动，或者给文字容器加了 clear: both，这些声明在小屏下依然生效——它们不会随 float 消失而自动失效。DevTools 里看 computed 样式，常会发现 clear: both 仍在起作用，把段落往下硬推一截。
立即学习“前端免费学习笔记（深入）”；
真正难调试的，从来不是“怎么让图片不浮”，而是“什么时候该把所有浮动相关声明都清干净”。多一个没撤掉的 clear，就可能让正文在 iPad 竖屏下突然空出 20px 间距。
