css - 三表并排溢出的div容器？

我的页面布局有问题。
我想创建3个表并排设置它们，所以我将它们的float属性设置为“ left”，但是div容器的高度仅与第3个表固定，两个第一个表是div的溢出。请帮助我修复它。
这是我的页面

<body>

<div id="main">

    <table id="tbSA" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table id="tbShops" class="tb">
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

    <table>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
        <tr><td>Code</td></tr>
    </table>

</div>
</body>

这是风格

body {
    background-color: #5c87b2;
}
#main {
    margin: 10px 10px 15px 10px;
    background-color: #fff;
}

table, td {
  border: solid 1px #e8eef4;
}

.tb {
    float:left;
    margin-right:10px;
}

最佳答案

这种排序问题是因为您的前两个表是浮动的。但最后一个不是，因此div将正确调整其大小以包装第三个表。

但是它也可以使div环绕浮动表。您必须清除浮子。

有很多方法可以解决此问题：

最安全的方法是在关闭父div [Demo]之前使用清除div

<div style="clear:both"></div>

旧的流行方法是给overflow:hidden，这将迫使div包裹所有元素。这就是其他答案的重点[Demo]
第三种方法是使用.clearfix类，这是当今最流行的方法。 [Demo]

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}