max-width: 100% 单独对浮动图片无效，因浮动元素脱离文档流，父容器高度坍缩且包含块可能非预期父级；须配合 BFC（如 overflow: hidden 或 display: flow-root）才能生效。
为什么 max-width: 100% 单独用对浮动图片没用
因为浮动元素脱离文档流，max-width: 100% 只约束内容宽度，不改变浮动造成的布局塌陷。父容器高度会坍缩，图片视觉上“飘”出边界，尤其在响应式场景下特别明显。
常见错误现象：img { float: left; max-width: 100%; } —— 图片依然撑破父容器右边缘，或导致后续文字错位、父容器高度为 0。
- 浮动本身不触发 BFC，父容器无法“包裹”它
-
max-width是相对于其**包含块**计算的，而浮动元素的包含块可能不是你预期的父容器（比如是视口） - 移动端 Safari 和旧版 Android 浏览器对浮动 + 百分比宽的组合兼容性更差
必须搭配清除浮动或 BFC 触发
让父容器重新“感知”浮动子元素的高度，才能让 max-width: 100% 生效。
推荐做法（按优先级）：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
overflow: hidden或overflow: auto（最简，兼容到 IE8） - 用
display: flow-root（现代写法，语义清晰，IE 不支持） - 避免用
clear: both在末尾加空 div——冗余且不易维护
示例：
div.container {
overflow: hidden; /* 或 display: flow-root */
}
div.container img {
float: left;
max-width: 100%;
height: auto;
}
float 还值得用吗？替代方案对比
纯图文环绕场景少，但 CMS 输出或遗留模板里仍常见 float。直接替换需评估兼容性与改动范围。
- CSS Grid / Flexbox 能更好控制图文流，但无法原生实现“文字绕图”效果（需
shape-outside配合） -
float在打印样式表中仍有稳定表现，Grid/Flex 在部分打印机驱动里支持弱 - 如果只是“左图右文”，用
display: flex更可控；若真要文字环绕，float+shape-outside仍是唯一可靠路径
图片本身尺寸异常时的连锁问题
即使清除了浮动，原始图片过大（比如 4000×3000px）仍可能拖慢渲染、触发重排，或让 max-width: 100% 失效（因浏览器对超大图有内部限制）。
- 务必配合
height: auto，否则宽高比断裂 - 服务端压缩+响应式
srcset比纯 CSS 更治本 - 某些安卓 WebView 对
max-width在float元素上解析异常，可加width: 100%回退
真正卡点不在怎么写 CSS，而在是否意识到：浮动图片的响应式，本质是「内容交付」和「布局控制」两个层面的事——前者靠后端/构建工具，后者才轮到 CSS 插手。
