当内容收缩时，浮动容器不会收缩

Question

我有一个容器，我可以在其中添加或删除元素（使用 javascript）

<div style='float:left;'>
    <p id='myp1'>elem 1</p>
    <p id='myp2'>elem 2</p>
    <p id='myp3'>elem 3</p>
    <p id='myp4'>elem 4</p>
    <p id='myp5'>elem 5</p>
</div>

无论我做什么，添加元素或使其更大（使用填充/边距/行高等）它将调整大小以适应。

无论我做什么，要么删除一个元素，要么使它更小（使用填充/边距/行高等）它不会缩小。

它给我留下了越来越多的未使用空间。

这种情况仅发生在 Firefox 中（正如我注意到的），并将子内容包装在其他 div/spans/table 中，这对我没有帮助，问题仍然会发生。

（您可以通过向包含的 div 添加边框来注意到此错误）

这可能是一种正常行为，我只是不明白，但对我来说，现在它只是令人困惑。

因此，至少提前感谢您的任何建议或解释！

Answer 1

您可以将容器的高度设置为自动。因此，每当添加或删除内部内容时，容器高度都会自动调整。