bootstrap不提供专用文本环绕组件，但通过float-start（bs5）或float-left（bs4）配合me-3/mr-3即可实现；失败主因是父容器触发bfc（如flex、grid、overflow:hidden），阻断浮动。
Bootstrap 本身不提供“文本环绕图片”的专用组件，但完全支持标准 CSS 浮动行为——只要用对类、避开常见布局陷阱，float-start（BS5）或 float-left（BS4）就能稳稳绕排。
为什么加了 float-left 文字还是不绕？
最常踩的坑不是类名写错，而是父容器“悄悄拦住了浮动”：
- 父容器用了
display: flex或display: grid—— 这会创建新的 BFC，浮动元素被截断，文字只能在下方流走 - 父容器设置了
overflow: hidden（比如某些.card、.container子元素默认带这个）—— 同样触发 BFC，浮动失效 - 图片和文字被塞进了同一个
.row或.d-flex容器里—— flex 容器根本不认浮动，直接忽略 - 图片没设宽高或用了
.img-fluid但父容器尺寸塌陷——浮动需要明确的渲染上下文，空高容器会让浮动“悬空”
float-start me-3 和 pull-left mr-3 怎么选？
选哪个取决于你用的 Bootstrap 版本，不是功能差异：
- Bootstrap 5：用
float-start+me-3（me= margin-end，适配 RTL） - Bootstrap 4：用
float-left+mr-3（mr= margin-right） - 两者都需确保图片是块级元素（
.img-fluid默认是display: block，没问题；但若手动写了display: inline就得覆盖） - 别混用：比如在 BS5 里写
float-left，它不会生效，也不报错，只是静默失效
用 shape-outside 能实现更酷的环绕吗？
能，但绝大多数场景下没必要，还容易翻车：
-
shape-outside必须配合float使用，且元素必须是块级、有确定宽高——而.img-fluid的宽度是百分比，shape-outside: circle(50%)在缩放时会严重失准 - IE 完全不支持；Edge 17+ 才开始支持；部分安卓 WebView 表现不稳定
- 要让图片变块级，得额外加
style="display: block"，破坏语义和可维护性 - 真正需要非矩形轮廓（如圆形头像文字环绕）时才值得上，日常图文混排，
float+ 合理margin已足够干净可靠
浮动绕图看着简单，实际成败关键不在 float 类本身，而在它所处的布局上下文是否“允许浮动存在”。一个 overflow: hidden 或一行 display: flex 就能让整个效果消失，而这种样式往往藏在祖先组件里，不容易一眼发现。
