float 会导致图片撑破容器，max-width: 100% 必须配合 height: auto 和父容器触发 BFC（如 overflow: hidden）才能生效；在 flex/grid 中 float 失效，max-width 才真正可靠；现代方案优先选用 inline-block 或 table 布局替代 float。
float 会导致图片撑破容器，max-width: 100% 是必要但不充分的解法
纯靠 max-width: 100% 挡不住浮动元素的“溢出冲动”。当图片被 float: left 或 float: right 后，它会脱离文档流，此时即使设置了 max-width: 100%，父容器仍可能无法正确计算高度，导致后续内容塌陷，图片本身也可能在窄屏下突破父宽——尤其当父容器有 padding 或 border 时。
实操建议：
-
max-width: 100%必须配合height: auto使用，否则等比缩放失效 - 浮动图片的父容器要触发 BFC（比如加
overflow: hidden或display: flow-root），否则高度塌陷，max-width就失去参照系 - 如果父容器是 flex 或 grid 容器，
float会自动失效，此时max-width: 100%才真正起效
响应式图片在浮动布局里，width 和 max-width 要分清谁管谁
width: 100% 强制拉满，但会失真；max-width: 100% 是上限，允许图片按原始比例缩小。浮动场景下，很多人误写成 width: 100%，结果小图被强行撑大、模糊，大图又因 float 脱离流而溢出。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 手机上看图片边缘被切掉 → 实际是父容器没设
overflow: hidden，且浮动未清除 - 图片在平板横屏时突然变小 → 因为
width: 100%在不同宽度容器中强制重算，破坏了自然尺寸 - 同一张图在 Chrome 正常，在 Safari 溢出 → Safari 对浮动 + 百分比 width 的解析更严格，尤其遇内边距时
正确写法示例：
img {
float: left;
max-width: 100%;
height: auto;
}
.figure-container {
overflow: hidden; /* 触发 BFC，兜住浮动 */
}现代替代方案：用 display: inline-block 或 display: table 绕过 float 的坑
不是所有场景都必须用 float。很多所谓“图文混排”需求，其实只是想让文字环绕图片——这完全可以用更可控的方式实现，避开浮动带来的宽度计算混乱和清除难题。
可选路径：
-
display: inline-block+vertical-align: top，图片作为行内块，文字自然环绕，max-width: 100%参照父容器宽度稳定生效 -
display: table把图文包进 table-cell，单元格天然支持百分比宽度和自适应，兼容性到 IE8 - 直接上
shape-outside（需配float），但仅适用于高级环绕，且 Safari 对shape-outside: margin-box支持不稳定
max-width 在不同 CSS 上下文中的行为差异
同一个 max-width: 100%，在浮动、flex、grid、普通块级容器里表现完全不同。它永远是相对于“包含块”（containing block）计算的，而包含块由父元素的 display 类型和定位方式决定。
关键区别：
- 在
float元素内部，包含块是最近的块级祖先，不是父容器本身（容易误判） - 在
flex容器中，max-width相对于 flex item 的可用空间，但若父设了flex-shrink: 0，图片就再也缩不动了 - 在
position: absolute下，包含块变成最近的定位祖先，max-width: 100%可能参照 body，而非视觉上的“旁边那个 div”
所以别只盯着图片样式改，先看它的父容器用了什么 layout 模式。
复杂点在于：浮动还在用，但新项目已倾向用 flex/grid；老项目里清除浮动的代码（如 ::after { content: ""; display: table; clear: both; }）如果漏了，max-width 就永远找不到正确的参照容器。
