求助：section背景未覆盖Bootstrap类图片且图片超出div问题

嘿，我来帮你捋捋这个问题！你遇到的情况其实是浮动元素脱离文档流导致的，Bootstrap的float-right类会让图片跳出正常的文档流，这就带来两个核心问题：

• 父容器<section>无法感知到浮动图片的高度，所以背景只会渲染到文本所在的区域，不会覆盖图片；
• 脱离流的图片也很容易超出父容器的边界。

下面给你两个靠谱的解决办法：

方法一：用Bootstrap的clearfix清除浮动 #

这是最快的修复方式，只需要给你的<section>标签加上clearfix类，它会强制父容器包含住浮动的子元素，背景就能正常覆盖整个内容区域，图片也不会超出容器了：

<section class="about clearfix">
  <h2>Title here</h2>
  <p>paragraph</p>
  <img src="https://media.licdn.com/dms/image/C5603AQH92_pzwQHHGA/profile-displayphoto-shrink_200_200/0?e=1529355600&v=beta&t=8VBme0P0e-CIprWjJzI15iFhkJsSl9SbfdKmzABs3Pc" class="rounded float-right">
  <!-- 其他内容 -->
</section>

方法二：改用Flex布局替代浮动（更推荐） #

浮动布局本身就容易出现这类流的问题，Bootstrap提供了完善的Flex布局类，用它来实现图文排列会更稳定可控：

<section class="about d-flex flex-wrap align-items-start">
  <div class="flex-grow-1">
    <h2>Title here</h2>
    <p>paragraph</p>
    <!-- 其他文本内容 -->
  </div>
  <img src="https://media.licdn.com/dms/image/C5603AQH92_pzwQHHGA/profile-displayphoto-shrink_200_200/0?e=1529355600&v=beta&t=8VBme0P0e-CIprWjJzI15iFhkJsSl9SbfdKmzABs3Pc" class="rounded ms-3">
</section>

这里的d-flex把section变成flex容器，flex-wrap保证小屏幕下内容自动换行，flex-grow-1让文本区域占满剩余空间，ms-3给图片加左边距替代浮动的间距，完全不需要用float-right，自然就不会有脱离流的问题了。

另外，如果你还担心图片溢出，可以给图片加上img-fluid类，它会让图片自适应父容器的宽度，避免超出边界：

<img src="你的图片地址" class="rounded ms-3 img-fluid">

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