如何在Bootstrap 4中不使用float实现文字环绕图片？

当然可以啦！在 Bootstrap 4 里完全不用依赖 float 属性就能实现文字环绕图片的效果，我给你分享两种实用的方法：

这种方法借助 Bootstrap 内置的工具类，几乎不用额外写自定义 CSS，就能达到和 float 一样的文字环绕效果：

<div class="container mt-4">
  <!-- 图片用 d-inline-block 变成行内块元素，配合间距和对齐类 -->
  <img src="你的图片路径" alt="示例图片" class="d-inline-block align-top mr-3" style="width: 200px; height: auto;">
  <p>这里是需要环绕的文本内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

关键类说明： #

• d-inline-block：把图片设置成行内块级元素，让文本可以自然环绕它
• align-top：让图片和文本顶部对齐，保证排版整齐
• mr-3：给图片右侧添加间距，避免文本紧贴图片

如果想要图片居右，只需要把 mr-3 换成 ml-3 即可。

如果你需要更精细的布局控制，CSS Grid 也是个不错的选择，完全不需要用到 float：

<div class="container mt-4" style="display: grid; grid-template-columns: auto 1fr; grid-gap: 1rem;">
  <img src="你的图片路径" alt="示例图片" style="width: 200px; height: auto;">
  <p>这里是需要环绕的文本内容，Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

这种方式会把容器分成两列，图片占自适应宽度，文本占剩余空间。当文本高度超过图片时，会自动填充图片下方的整个宽度，效果和文字环绕完全一致。

内容的提问来源于stack exchange，提问作者Belial