图片超出容器宽度的直接原因是未约束尺寸，应使用max-width: 100%配合height: auto，并确保父容器有明确宽度；清除浮动仅解决塌陷，不控制溢出。
图片超出容器宽度的直接原因
在浮动布局中， 这是最可靠、兼容性最好的方案。关键点在于： 清除浮动（如用 纯浮动布局已逐渐被更可控的方式取代。如果只是为了图文并排，可考虑： 立即学习“前端免费学习笔记（深入）”； 真正需要浮动时，用 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% 是绕不开的基础；而清除浮动只是补救塌陷，不能替代尺寸控制。
