浮动图片响应式关键在于同时控制图片、容器和清除层三处：图片设max-width:100%且height:auto，容器设max-width提供参照，清除用flow-root或伪元素；现代布局应优先用Grid/Flex替代float。
浮动图片本身不响应，但你可以让它“看起来”响应——关键是切断它脱离文档流后的尺寸失控链。核心不是改float，而是控制它浮起来之后的尺寸、容器约束和清除逻辑。
为什么float图片在小屏上会撑破容器
常见现象是：PC端四图并排正常，手机上图片宽度没缩、文字被挤到下一行、甚至横向滚动条出现。这不是float的问题，而是你只写了float: left，却没管它浮起来之后的width和父容器的约束能力。
-
float让图片脱离文档流，但它仍按原始尺寸或你写的width渲染，不会自动随屏幕变小 - 如果给
img设了width: 300px或没设max-width，它就卡死在这个值，不管父容器多窄 - 父容器若没设
max-width或width，max-width: 100%对img就失去参照基准
必须同时控制三处：图片、容器、清除方式
单点修改大概率失效。比如只加max-width: 100%，但父容器是display: flex且没设flex-wrap: wrap，图片照样溢出；或者用了overflow: hidden清除浮动，结果裁掉了box-shadow或下拉菜单。
- 图片层：
img { max-width: 100%; height: auto; }—— 不要写width: 100%，否则小图会被拉伸 - 容器层：
.gallery { width: 100%; max-width: 1200px; }—— 给max-width: 100%提供计算依据 - 清除层：用
display: flow-root替代overflow: hidden，避免意外裁剪；旧项目用.gallery::after { content: ""; display: table; clear: both; }
响应式换列时，别只调width百分比
很多人在媒体查询里只改.item { width: 50% }，但忘了margin和box-sizing的叠加效应。30% + 左右margin: 1.5%在PC端刚好三列，但在小屏下width: 50% + 同样margin可能变成两列半，导致最后一张掉行。
立即学习“前端免费学习笔记（深入）”；
- 统一用
box-sizing: border-box，确保padding/border不额外增加宽度 - 把
margin也写进媒体查询：@media (max-width: 768px) { .item { width: 48%; margin: 1%; } } - 更稳妥的做法：用
calc(50% - 2px)代替百分比，避开小数精度问题（尤其Safari）
Flex/Grid时代还该用float做图片布局吗
不该。除非你在维护IE11兼容的老系统，或明确要求文字环绕图片这种float原生场景。现代图片画廊用display: grid配合repeat(auto-fill, minmax(300px, 1fr))，一行代码搞定响应列数，不用清浮动、不用算百分比、不用防塌陷。
浮动图片真正该用的场合只剩一个：图文混排中让文字自然绕图——其他所有网格、列表、画廊布局，都该用flex或grid替代。容易被忽略的是：一旦父容器用了display: flex或display: grid，子元素上的float就直接失效，此时留着float只会干扰调试。
