Question

请帮助我理解为什么以下代码的image - div流出box - div。

<body>
    <div id="box" style="border: 2px solid green;">
            <div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
            <div id="text" style="background: yellow;">This is some text</div>
    </div>
</body>

换句话说，我期望绿色边框完全包围内部div，而不仅仅是黄色边框。

Answer 1

当一个孩子浮动时，父母不会包裹它。您可以使用以下两种解决方案：

#box{
     overflow:hidden;
}

或者

#box{
     float:left;
}

您也可以display:inline-block使用#box，但这不适用于IE6

Answer 2

将overflow设置为hidden并不总是理想的解决方案，就好像你的内容大于容器一样，它不会显示。

通过在容器底部添加清除元素，您应该看到浮动元素适合父级。

<body>
    <div id="box" style="border: 2px solid green;">
            <div id="image" style="height: 200px; width: 200px; background: red; float: left;"></div>
            <div id="text" style="background: yellow;">This is some text</div>

            <div style="clear: left; height: 0; margin: 0; padding: 0"></div>
    </div>
</body>

显然，您希望为此创建一个泛型类，并在外部样式表中设置CSS - 但原则是有效的。

Answer 3

允许浮动元素超出其父元素。要将浮动元素保留在包含元素内，您需要在清除浮动的末尾添加一个空元素：

所以在id="box"元素中，添加如下内容：

<div style="clear: left;"></div>

Answer 4

您必须使用style="clear: left;"

使用元素“清除”浮动对象

floated inner <div>流出周围的<div> </div> </div>

4 个答案: