Bootstrap 4 文字环绕图片需满足四个条件：显式float、块级元素、明确宽高、父容器不触发BFC；常见失效因父容器overflow:hidden或flex布局导致BFC截断浮动。
Bootstrap 4 本身不提供文字环绕图片的专用类，但完全可以用原生 CSS 的 float 实现，且能保持响应式——关键不在 Bootstrap 版本，而在是否满足浮动生效的四个底层条件。
为什么加了 float-left 文字却不绕图？
这不是 Bootstrap 失效，而是浮动被父容器“截住”了。常见现象是图片左浮，文字却整段下沉到图下方。
- 父容器用了
overflow: hidden（比如某些.card、.container子元素）或display: flex/display: grid——这些会触发 BFC，让浮动元素脱离文档流后无法影响后续文本流 -
<img alt="如何在Bootstrap 4中用CSS实现文字环绕响应式图片的排版" >没有明确宽度，仅靠img-fluid的max-width: 100%会导致浮动区域计算不准，尤其在窄屏下塌缩 - 图片和文字不在同一个父级块容器内，比如图片在
.row里，文字在另一个.col中——浮动只对同级后续行内内容生效
float-left + img-fluid 一起用，图片变小了怎么办？
这是预期行为，不是 bug。img-fluid 设了 max-width: 100% 和 height: auto，而浮动元素宽度由内容决定；当父容器变窄，max-width: 100% 就强制它缩，看起来“缩水”。
- 稳妥解法：去掉
img-fluid，改用固定宽度，如width="300"或自定义 class：style="width: 300px;" - 折中解法：保留
img-fluid，但覆盖其约束：style="width: 300px; max-width: none;" - 响应式解法：用
width: 100%配合max-width: 300px，再加height: auto，确保宽高比稳定
如何让环绕效果在小屏也可靠？
Bootstrap 4 没有 float-start/float-end（那是 v5 的），必须用 float-left / float-right，并配合 mr-3 / ml-3 控制间距。但响应式下真正要处理的是“何时关闭环绕”。
立即学习“前端免费学习笔记（深入）”；
- 小屏文字行宽变窄，强行环绕易导致可读性崩坏，建议在
@media (max-width: 576px)中设float: none，让图片居中独占一行 - 别依赖
d-none d-sm-block类来“隐藏图片再换位置”——这只会让整个元素消失，不解决环绕逻辑 - 如果必须保留环绕，优先用
shape-outside的矩形方案（如shape-outside: inset(0)），但注意 Bootstrap 4 默认不兼容旧版 Safari，且需显式加display: block和固定宽高
最容易被忽略的硬性前提
四个条件缺一不可，漏一个，环绕就失效：
-
float: left或float: right必须显式声明（不能靠父容器继承） -
<img alt="如何在Bootstrap 4中用CSS实现文字环绕响应式图片的排版" >必须是块级元素：display: block（否则底部留白干扰对齐） - 必须有明确宽高：至少设
width（推荐用px或vw，避免纯%在空容器中塌陷） - 父容器不能触发 BFC：
overflow: hidden、display: flex、display: flow-root全部禁用
最后提醒一句：别把 .row 当图文容器用。它本质是 flex 容器，子项浮动会被忽略。用普通 <div> 包裹图片和段落，才是最稳的起点。</div>
