object-fit 与 float 不兼容，因浮动导致父容器高度塌陷、图片脱离文档流且无明确尺寸上下文，使 object-fit 失效；必须改用 flex/grid 布局配合显式宽高或 aspect-ratio 和 object-fit 才能正常工作。
object-fit 和浮动（float）不兼容，别用浮动处理响应式图片——这是最直接的结论。
浮动是为文本环绕设计的布局模型，它会脱离文档流、触发 BFC、影响后续元素排版，且无法与 object-fit 协同控制尺寸基准。现代响应式图片必须依赖容器约束 + object-fit + 布局上下文（如 Flex/Grid），浮动只会让 object-fit: cover 失效或产生不可预测的裁剪偏移。
为什么 float 会让 object-fit 失效？
-
float元素默认宽度由内容决定（即图片原始宽），不会自动拉伸填满父容器； -
object-fit只在「有明确宽高约束」的盒子内生效，而浮动元素的渲染尺寸不受父 flex/grid 容器主轴控制； - 浮动后
width: 100%对 img 失效（它只占原始宽度），导致object-fit在一个远小于容器的框里裁图，结果就是“加了 cover 还是变形”； - 检查 computed styles 会发现：浮动 img 的实际 width 是 320px（原始尺寸），而父容器宽 800px ——
object-fit根本没作用域。
替代方案：用 Flex 布局替代 float 实现图文并列
常见需求其实是「图片左/右置，文字环绕」，这早该用 Flex 实现：
- 父容器设
display: flex，图片和文字作为子项； - 图片侧设
flex: 0 0 300px（或flex: 0 0 auto+width: 300px）； - 文字侧设
flex: 1，并确保内部段落不溢出； - 图片自身加：
img { width: 100%; height: 200px; object-fit: cover; flex-shrink: 0; }
这样既能保持比例，又响应式缩放（改用 aspect-ratio: 16 / 9 更好）。
如果必须兼容老浏览器（IE11），怎么绕过 float + object-fit 的坑？
object-fit 在 IE 完全不支持，而 float 在 IE 里也表现不稳定。此时应：
- 放弃
object-fit，改用背景图：div容器 +background-image+background-size: cover； - 用伪元素或 padding-top 技巧模拟 aspect-ratio（如
padding-top: 56.25%对应 16:9）； - 图片用
<img>仅作 fallback，通过@supports not (object-fit: cover)隐藏； - 切勿在 float 容器里塞
object-fit—— 兼容性叠加后几乎必然失败。
真正容易被忽略的点是：object-fit 不是独立生效的魔法属性，它严格依赖其宿主元素的渲染尺寸；而浮动破坏了这个尺寸来源。哪怕你写了 object-fit: cover，只要图片盒子没被正确约束（宽/高/aspect-ratio + flex-shrink/min-width 控制），它就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
