object-fit 在 float 下失效，因浮动致父容器塌陷、无尺寸基准；需显式设图宽高、父容器触发bfc并设min-height、同时声明object-fit与object-position。
object-fit 本身不解决浮动（float）导致的图片变形——它只对有明确尺寸的 <img> 生效；而浮动会让容器塌陷、宽高失控，object-fit 直接失效。
为什么 float + object-fit 会失效
浮动元素脱离文档流，父容器高度常塌陷为 0，object-fit 需要“有框才能适配”，没高度就无从缩放或裁剪。常见现象是图片按原始尺寸撑开、左右浮动后上下错位、object-fit: cover 完全没反应。
- 浮动容器未设
height或aspect-ratio，object-fit失去计算基准 -
float: left后，兄弟元素上浮，进一步挤压图片可用空间 - 老式清除浮动方式（如
clear: both）若加在错误位置，仍会导致父容器尺寸异常
替代 float 的现代方案：用 flex 或 grid 控制图文环绕
浮动本就不该用于布局，图文环绕需求完全可用更可控的方式实现，同时保住 object-fit 效果：
- 用
display: flex+align-items: flex-start模拟左图右文，图片设width: 200px; height: 150px; object-fit: cover; - 用
shape-outside实现文字绕不规则图片（需配合float，但此时图片必须有固定宽高+object-fit，且仅限支持该属性的浏览器） - 纯语义化图文流：图片设
width: 100%; aspect-ratio: 4/3; object-fit: contain;，让其自然块级换行，文字用margin-top或grid-row控制间距
非换掉 float 不可时，必须补的三件事
如果 legacy 代码无法动 float，只能硬改样式，以下三点缺一不可：
- 给浮动图片自身加显式尺寸：
width: 200px; height: 150px;（不能只写width: 100%） - 给其父容器触发 BFC 并设最小高度：
overflow: hidden; min-height: 150px; - 确保
object-fit和object-position同时存在，例如：object-fit: cover; object-position: center top;（否则裁剪锚点默认居中，可能切掉关键内容）
真正容易被忽略的是：浮动不是“让图片靠边”这么简单，它是整个渲染上下文的切换。一旦用了 float，object-fit 就不再是独立生效的属性，而是依赖你手动重建那个被破坏的尺寸上下文——这个重建过程比直接换 flex/gird 多出至少三倍维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
