浮动图片的max-width:100%无效，因其包含块常为视口而非父容器；需父容器创建bfc（如display:flow-root）并设width，且避免overflow:hidden的裁剪副作用，推荐flex布局替代float。
直接给父容器加 overflow: hidden 并不能让浮动图片真正“缩进”父容器——它只是触发 BFC，让父容器重新包裹高度，但 max-width: 100% 对浮动元素本身依然无效，因为浮动元素的包含块往往不是你写的那个父容器。
为什么 max-width: 100% 对浮动图片没用
浮动元素脱离文档流，浏览器计算 max-width: 100% 时，参考的是它的「包含块」，而这个包含块大概率是视口（viewport）或最近的定位上下文，不是你期望的父容器。所以即使父容器宽度只有 300px，浮动图片仍可能按视口宽度的 100% 渲染（比如 1920px），视觉上直接冲出边界。
常见错误现象：
- 图片明明设了
max-width: 100%，却撑破卡片、溢出模态框 - 父容器加了
overflow: hidden后高度正常了，但图片还是超宽、被裁剪得莫名其妙 - 在移动端预览时，大图横向滚动条出现，或文字被挤到下一行下方
必须同时满足两个条件才生效
要让浮动图片真正响应式缩放，得同时解决「布局感知」和「尺寸约束」两层问题：
- 父容器需创建 BFC，使其能正确计算浮动子元素高度 —— 推荐用
display: flow-root（现代、无裁剪副作用），老项目可用overflow: auto或clearfix类 - 浮动图片自身必须明确其宽度参照系 —— 给父容器设
width（如width: 100%或固定值），再配合img { float: left; max-width: 100%; height: auto; } - 如果父容器没有显式宽度（比如只靠内容撑开），
max-width: 100%依然无从算起，此时需补上width: 100%或inline-size: 100%
overflow: hidden 的隐藏代价
它确实能快速触发 BFC，但副作用明显：
- 所有超出父容器的内容都会被裁剪，包括
box-shadow、transform偏移的元素、下拉菜单、tooltip - 绝对定位子元素（比如气泡提示）会突破裁剪边界，造成布局错乱
- 在 iOS Safari 中，
overflow: hidden可能干扰touch-action: pan-y，导致滚动卡顿 - IE6/7 下某些嵌套场景中，
overflow: hidden并不总能可靠触发 BFC
更稳的替代方案：别用 float
浮动本就不是为响应式图片设计的。真要图文环绕，float + shape-outside 是唯一标准路径；但绝大多数“左图右文”场景，用 display: flex 更可控：
.container { display: flex; align-items: flex-start; }-
.image { flex: 0 0 auto; max-width: 100%; }（不用 float，自然受父容器约束） .text { flex: 1; min-width: 0; overflow-wrap: break-word; }
服务端压缩图片 + 前端 srcset 才是治本之策；CSS 只负责最后一步的尺寸适配。容易被忽略的是：浮动图片的“溢出”，往往不是 CSS 写错了，而是图片原始尺寸过大（比如 4000×3000px），浏览器渲染时已触发内部限制，此时再调样式也难挽回性能与表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
