html - 具有浮动属性的表拒绝在 div 中，即使表标签字面上是在 div 标签内

Question

我在一个灰色的 div 中并排制作了两张桌子。但是，这些表在 div 之外，即使它们确实在 div 标签内。这是因为 float 属性。没有它，它工作正常

#table1 {
  position: relative;
  left: 100px;
  border: 1px solid black;
  float: left;
}

#table2 {
  position: relative;
  right: 100px;
  border: 1px solid black;
  float: right;
}

<div id="container">
  <table id="table1">
    <tr>
      <td>
        <header>
          <h2>TABLE 1</h2>
        </header>
      </td>
    </tr>
  </table>
  <table id="table2">
    <tr>
      <td>
        <header>
          <h2>TABLE 2</h2>
        </header>
      </td>
    </tr>
  </table>
</div>

测试一下，表格拒绝进入 div。

标签： htmlcss

Answer 1

父元素不可扩展以包含浮动元素。所以你的父 div 应该正确地折叠。

要让 div 做你想做的事，添加overflow:auto;或overflow:hidden;到它的 CSS。