Bootstrap 5 中文字环绕图片需用 float-start/float-end 替代已移除的 float-left/float-right，并配合 me-3/ms-3 控制间距，注意父容器不能有 overflow: hidden 或 flex 布局，且 img-fluid 与 float 共用可能导致尺寸受限。
Bootstrap 5 里用 float 类就能实现文字环绕图片
bootstrap 5 默认移除了所有 float 工具类（比如 float-left），但你仍然可以直接用原生 css 的 float 属性，或手动添加兼容类。文字环绕图片本质就是让 <img> 脱离文档流、向左/右浮动，文本自然流过去——这和 bootstrap 版本无关，关键在是否启用 float。
实操建议：
- 给图片加
class="float-start me-3"（左浮 + 右边距）或class="float-end ms-3"（右浮 + 左边距），me-3/ms-3是 Bootstrap 5 的间距工具类，避免文字贴太紧 - 确保父容器没有设置
overflow: hidden或display: flex，否则会截断或禁用浮动效果 - 如果图片后紧跟
<p>或<div>，它们默认会环绕；但若后面是<div class="clearfix">或用了clear: both，环绕就会提前结束
为什么 img-fluid 和 float 一起用时图片变小了
因为 img-fluid 设了 max-width: 100% 和 height: auto，而浮动元素的宽度默认由内容决定——如果父容器窄，max-width: 100% 就会限制它撑不开，看起来“缩了”。这不是 bug，是响应式与浮动共存时的预期行为。
解决办法：
- 去掉
img-fluid，改用固定尺寸（如width="200"）或自定义 class 设置width: 200px - 或者保留
img-fluid，但用style="width: 200px; max-width: none;"覆盖掉它的约束 - 更稳妥的做法：用
class="float-start"+style="width: 200px;"，不依赖img-fluid的响应逻辑
Bootstrap 4 用户别直接套用 float-left
Bootstrap 4 的 float-left 和 float-right 在 v5 中已被删掉，换成 float-start / float-end。如果你在 v5 项目里写了 float-left，它不会生效，浏览器控制台也不会报错——只是默默忽略。
检查方式：
- 打开开发者工具，看图片元素的 computed 样式里有没有
float: left - 确认你用的是 Bootstrap 5？查
bootstrap.min.css文件头注释，或运行bootstrap.Version（如果 JS 已加载） - 升级迁移时，批量替换
float-left → float-start、float-right → float-end
现代替代方案：用 shape-outside 实现图文混排
如果想让文字沿着图片轮廓（比如圆形头像）环绕，float 就不够用了。这时得上 CSS 的 shape-outside，它支持 circle()、polygon() 等形状，但注意：必须配合 float 才生效。
示例（圆形头像文字环绕）：
<img src="avatar.jpg" class="float-start" style="width: 120px; shape-outside: circle(50%);">
要点：
-
shape-outside只对浮动元素起作用，不 float 就无效 - 需要图片本身是正方形且
border-radius: 50%才视觉匹配，否则形状和外观不一致 - IE 完全不支持，Edge 17+、Chrome 37+、Firefox 62+ 支持，移动端基本 OK
float-start + 间距工具类就够了。真正容易被忽略的是父容器的 overflow 和清除浮动行为——哪怕只多一个 clearfix，图文就突然“断开”了。 
