object-fit 在 float 下必然失效，因浮动使父容器高度塌陷，导致 object-fit 缺乏适配所需的尺寸上下文；需同时设置图片显式宽高、父容器触发bfc并设最小高度、声明 object-fit 与 object-position。
object-fit 在 float 下根本不会生效——不是写错了，而是浮动直接破坏了它工作的前提：一个有明确尺寸的渲染上下文。
为什么 float + object-fit 一定失效
-
float元素脱离文档流，父容器高度塌陷为 0，object-fit没“框”可适配 - 浏览器看到的是一个无高度的容器，
img实际按原始尺寸渲染，object-fit: cover形同虚设 - 常见现象：
object-fit完全没反应、图片左右浮动后上下错位、裁剪锚点（object-position）无效
必须同时补上的三件事（缺一不可）
- 给
img自身设显式宽高：width: 240px; height: 180px;（不能只写width: 100%） - 给父容器触发 BFC 并锁定最小高度：
overflow: hidden; min-height: 180px; - 同时声明
object-fit和object-position：object-fit: cover; object-position: center top;（默认居中裁剪常切掉人脸）
替代 float 的现代写法更省事
- 左图右文？用
display: flex：.wrapper { 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控制间距
真正容易被忽略的是：浮动不是“让图片靠边”这么轻量的操作，它是整个渲染上下文的切换。一旦用了，object-fit 就不再是独立属性，而成了你手动重建尺寸上下文的副产品——这个重建过程比直接换 flex/grid 多出至少三倍维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
