含align="left"属性的表格导致body的padding-bottom属性失效的解决咨询

问题原因 #

带align="left"属性的表格会触发浮动布局，导致父容器（包括外层div和body）出现高度塌陷——容器高度不再被浮动元素撑开，因此body设置的padding-bottom看起来没有生效。

无需修改内部内容的解决方案 #

所有方案仅需修改<body>标签的style属性即可：

方案1：触发BFC（使用overflow属性） #

给body添加overflow: auto或overflow: hidden，触发块级格式化上下文，让body正确包裹浮动元素，高度被撑开后padding-bottom自然生效：

<body style="padding-bottom:100px; overflow:auto;">
  <!-- 内部内容保持不变 -->
  <div style="border:2px solid red">
    <table align="left" style="background-color:silver;">
      <tbody>
        <tr>
          <td style="height:900px;">Hello</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

方案2：使用display: flow-root（更直观的BFC触发方式） #

display: flow-root是CSS专门用于创建BFC的属性，不会像overflow那样可能产生意外滚动条，效果更可控：

<body style="padding-bottom:100px; display:flow-root;">
  <!-- 内部内容保持不变 -->
  <div style="border:2px solid red">
    <table align="left" style="background-color:silver;">
      <tbody>
        <tr>
          <td style="height:900px;">Hello</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

方案3：兼容旧版浏览器的替代方案 #

如果需要适配旧版浏览器，可给body添加float: left; width: 100%;，同样能触发BFC并撑开高度，但会改变body的布局特性，建议优先使用前两种方案：

<body style="padding-bottom:100px; float:left; width:100%;">
  <!-- 内部内容保持不变 -->
</body>

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