css 浮动布局中图片撑破容器怎么办_限制图片宽度并清除浮动

宽度为 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% 是绕不开的基础；而清除浮动只是补救塌陷，不能替代尺寸控制。