javascript - 表不再正确附加溢出 :auto and floated container below

Question

基本上我有一个容器，其中包含一个表，该表使用 javascript 定期将数据附加到表中。有了这个，容器就有了一个适当的样式 overflow:auto 以允许它容纳更大量的数据而不会看起来很丑。

这工作正常，直到我在其下方放置了另一个容器，其属性为 float:left;。现在表格只显示第一个附加项。如果我检查该元素，我可以“看到”代码中的其他附加数据项，页面上还会出现一些数据项，但与完整表格完全不同。

如果我从包含表格的 div 中删除 overflow:auto 属性，它就可以工作(数据将打印到容器“外部”的页面)。如果我从下面的容器中删除 float:left; 属性，它也可以工作。是什么阻碍了他们一起工作？

更新:我没有在下方容器上使用 float:left，而是添加了一个清除 div，这样它就可以插入下方而无需使用 float 。但是问题仍然存在，所以看起来容器通常位于下方有问题。

代码如下。 “数据”是包含表格的容器，“下载”是位于下方的容器。如果重要，javascript 添加在下面。

<div id="data">
    <table id="data_table">
    </table>
</div>
<div id="download"></div>

样式表:

#data {
    float: left;
    width: 192px;
    height: 400px;
    border: 2px solid black;
    overflow: auto;
}

#data_table {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}

#data_table td {
    border: 1px solid black;
    width: 50px;
}

#download {
    width:900px;
    float:left;
    height: 75px;
    border: 2px solid black;
}

Javascript:(如果有某种关系)

$('#data_table').append('<tr><td><?php echo $catVarValue;?></td><td><?php echo $measVarValue;?></td></tr>');

}, );

Answer 1

找到了解决问题的办法。在 firefox 中尝试后，我意识到这是一个跨浏览器问题(因为它有效)。这导致我:

Strange behavior of "overflow: auto" on Chrome

它提供了解决方案。