当子 Div 浮动时，包含 Div 行为不正确答案

【问题标题】：Containing Div Not Behaving Correctly When Child Divs are Floating当子 Div 浮动时，包含 Div 行为不正确
【发布时间】：2010-03-10 14:26:43
【问题描述】：

此问题与another question I asked有关

基本上，我有 2 个水平对齐的 div。两者都位于一个名为“.Parent”的 div 中，所以结构是这样的：

 <div class="Parent">
    <div style="float:right">
        <span>source list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="float:left">
        <span>dest list</span>
        <select size="10">
            <option />
            <option />
            <option />
        </select>
    </div>

    <div style="clear:both; font-size:1px;"></div>

 </div>

问题是父 div 存在于另一个名为 #main 的 div 中。 #main 有一个白色背景，框住了我的所有内容。

在我将浮动添加到 .Parent 中的 div 之前，一切都很好，因为包含的 Div 将白色背景推到了正确的大小。但是现在 div 是浮动的，它们不会将 #main 的白色背景向下推。

谁能建议如何让#main 识别它应该伸展到的大小？我应该以不同的方式处理这个问题吗？

谢谢

戴夫

【问题讨论】：

有我们可以看到的直播吗？这会有所帮助:)！

标签： css html css-float

【解决方案1】：

给你的#main overflow:hidden; 和可选的clear:both;

【讨论】：

...一旦完成，小“clear: both” div 可能就不再需要了。

【解决方案2】：

实际上，它们的行为是正确的，并且父 div 永远不会扩展为包含浮动元素。如其他答案所示，您可以在 Google 上搜索“clear floats”以获取有关如何执行此操作的更多说明和示例。

【讨论】：