object-fit 与 float 不能共用，因浮动使图片脱离文档流导致父容器高度塌陷，object-fit 失去计算基准；其生效需满足三条件：容器有确定宽高、img 设 width/height:100%、容器非 inline 元素。
object-fit 和 float 不能一起用
加了 float 的 <img> 会脱离文档流，导致父容器高度塌陷——此时容器没有明确高度，object-fit 就失去计算基准，必然失效。这不是兼容性问题，而是渲染机制决定的。
常见错误现象：object-fit: cover 写了但图片还是拉伸/留白/不裁剪；检查 computed styles 会发现容器实际 height 是 0 或 auto。
- 浮动会让
<img>不再参与父容器的高度计算 -
object-fit要求容器有明确宽高（不能靠内容撑开） - 即使给容器设了
height: 200px，若同时用了float，还可能触发 BFC 异常或 margin 折叠
想“浮动图片”又用 object-fit？换思路
所谓“浮动图片”，多数场景其实是希望图文混排、文字环绕图片，或者让图片作为侧边装饰。这些需求不该靠 float + object-fit 实现，而应改用现代布局方案。
推荐路径：
立即学习“前端免费学习笔记（深入）”；
- 图文环绕：用
display: flow-root或overflow: hidden给文字容器清浮动，再单独控制图片尺寸和object-fit - 侧边图+文字主体：用
flex或grid布局，图片区域设固定宽高，img内部设width: 100%; height: 100%; object-fit: cover; - 需要文字绕图且图片要自适应填充：放弃
float，改用shape-outside+object-fit（注意 Safari 对shape-outside的支持仍有限）
如果非得保留 float，必须手动补高
极少数遗留项目无法去掉 float，那只能人工干预容器高度，否则 object-fit 永远不会生效。
关键操作：
- 给图片父容器显式设置
height（不能是min-height或aspect-ratio，旧版 Safari 不认后者） - 确保
img自身设了width: 100%; height: 100%; display: block;（display: block防止行内间隙） - 加上
overflow: hidden，否则cover裁掉的部分会溢出显示
示例代码片段：
.img-wrap { height: 180px; overflow: hidden; }
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
真正影响 object-fit 效果的三个硬条件
别被“浮动”带偏注意力——object-fit 是否起作用，只取决于这三点是否全部满足：
- 容器有**确定的宽高值**（px / % / rem 等均可，但不能是
auto或依赖内容撑开） -
<img>元素本身设置了width: 100%且height: 100%（百分比必须相对有尺寸的父级） - 容器不是
inline元素（默认不认height），需设display: block或inline-block
浮动只是干扰项之一，真正卡住效果的，永远是这三个条件里漏掉的任意一个。尤其容易忽略的是：用 width: 100% 却没配 height: 100%，或父容器本身高度为 0。
