图片超出容器宽度的直接原因是未约束尺寸，应使用max-width: 100%配合height: auto，并确保父容器有明确宽度；清除浮动仅解决塌陷，不控制溢出。
图片超出容器宽度的直接原因
在浮动布局中，<img> 默认是内联元素且不自动响应父容器宽度，一旦原始尺寸大于容器（比如父 <div> 宽度为 300px，图片原图宽 800px），它就会撑破容器——这不是浮动本身导致的，而是图片未做尺寸约束的结果。
用 max-width: 100% 限制图片宽度
这是最可靠、兼容性最好的方案。关键点在于：max-width: 100% 必须配合 height: auto 使用，否则可能拉伸变形；同时要确保父容器有明确宽度（或由上下文限制）。
- 不要只写
width: 100%：这会让小图被强行拉宽，失真 - 必须加
height: auto：保持宽高比 - 若父容器也浮动，需确认其宽度是否已被正确计算（常见于浮动嵌套场景）
img {
max-width: 100%;
height: auto;
}
清除浮动后图片仍溢出？检查 float 元素的包裹容器
清除浮动（如用 clear: both 或 ::after 伪元素）只解决父容器塌陷问题，并不约束子元素尺寸。如果图片还在溢出，说明：
- 清除代码没加在正确的父容器上（比如加在了图片兄弟元素上，而非图片所在浮动容器的父级）
- 图片所在的浮动容器本身没有设置
width或max-width - 存在
white-space: nowrap或font-size: 0等意外影响行内布局的样式
浮动布局中更稳妥的替代方案
纯浮动布局已逐渐被更可控的方式取代。如果只是为了图文并排，可考虑：
立即学习“前端免费学习笔记（深入）”；
-
display: flex+flex-wrap：父容器设display: flex，图片加max-width: 100%，天然不撑破 -
display: grid：对齐和尺寸控制更精确，尤其适合响应式图文卡片 - 保留浮动但加
overflow: hidden到父容器：强制触发 BFC，防止溢出可见，但只是“藏起来”，不是真正约束
真正需要浮动时，max-width: 100% 是绕不开的基础；而清除浮动只是补救塌陷，不能替代尺寸控制。
