如何使表格填充float:right图片旁剩余宽度且文本紧跟表格？

要解决右侧浮动图片旁表格占满剩余宽度、同时后续文本不受图片高度影响紧跟表格的问题，可通过触发BFC（块级格式化上下文）实现，具体方案如下：

核心思路 #

给表格套一个容器，通过overflow: hidden触发容器的BFC特性，让容器自动占据浮动图片右侧的剩余宽度；表格设置width: 100%填满容器宽度，后续文本会自然紧跟在容器下方，不受图片高度干扰。

完整代码示例 #

<div>
  <!-- 右侧浮动图片，可自行设置宽高 -->
  <img style="float: right; width: 200px; height: 300px;" alt="右侧浮动图片">
  
  <!-- 包裹表格的容器，触发BFC -->
  <div class="table-container">
    <table style="width: 100%; border-collapse: collapse;">
      <tr>
        <td style="border: 1px solid #ccc; padding: 8px;">表格单元格1</td>
        <td style="border: 1px solid #ccc; padding: 8px;">表格单元格2</td>
      </tr>
      <tr>
        <td style="border: 1px solid #ccc; padding: 8px;">表格单元格3</td>
        <td style="border: 1px solid #ccc; padding: 8px;">表格单元格4</td>
      </tr>
    </table>
  </div>

  <p>Some text</p>
  <p>Even more text</p>
</div>

对应的CSS：

.table-container {
  overflow: hidden;
}

原理说明 #

• overflow: hidden会触发容器的BFC，BFC的特性之一是不会与浮动元素重叠，因此容器会自动计算并占据浮动图片右侧的剩余宽度，不会被挤到图片下方。
• 表格设置width: 100%后，会完全填满外层容器的宽度，也就是图片旁的剩余空间。
• 后续的<p>元素会在BFC容器的下方正常布局，不会绕到图片旁边，完美实现“文本紧跟表格下方”的需求。

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