float 无法保持图片比例，因其使图片脱离文档流导致父容器塌陷、height 失效，进而使 max-width: 100% + height: auto 失效；修复需显式设 img 尺寸、父容器触发 bfc 并设 min-height、加 object-fit 和 object-position；现代方案应改用 flex、grid 或 aspect-ratio。

float 本身无法保持图片比例——它只会让图片脱离文档流，导致父容器塌陷、height 失效，进而让所有比例控制逻辑（包括 max-width 和 height: auto）全部失效。

为什么 max-width: 100% + float 会失真

浮动后图片不再参与高度计算，父容器高度常为 0；此时 max-width: 100% 虽仍限制宽度，但 height: auto 因无有效 width 上下文而退化为原始高度，图片被强制拉伸或错位。

• 常见现象：img 撑出容器、上下文字错行、右侧内容上浮覆盖图片
• 即使写了 width: 100%; height: auto;，只要父容器没显式 height 或 aspect-ratio，height: auto 就不生效
• float: left 后若未清除，后续元素会环绕，进一步挤压图片可用空间

非换掉 float 不可时的三步硬修复

仅当 legacy 代码无法删除 float 时才用此方案，缺一不可：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 给 img 自身设显式尺寸：width: 200px; height: 150px;（不能只写 width: 100%）
• 给其直接父容器触发 BFC 并设最小高度：overflow: hidden; min-height: 150px;
• 同时声明 object-fit: cover; 和 object-position: center;，否则裁剪锚点默认居中可能切掉关键内容

真正该用的现代替代方案

图文环绕类需求，float 已是过时布局手段。用以下任一方式，既能保持比例，又无需 hack：

• display: flex + align-items: flex-start：左图右文结构，图片设 width: 200px; aspect-ratio: 4 / 3; object-fit: cover;
• display: grid + grid-template-columns: 200px 1fr;：更精确控制图文间距与对齐
• 纯流式布局：图片设 width: 100%; aspect-ratio: 16 / 9;，配合 margin-block-start: 1rem 控制文字间距

最容易被忽略的是：float 不是“靠边”这么简单，它是整个渲染上下文的切换。一旦启用，你就得手动重建被破坏的尺寸基准——这个成本远高于直接改用 flex 或 grid。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！