浮动的内部<div>流出周围的<div>

Eth*_*roy 2 html css-float

请帮助我理解为什么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>
Run Code Online (Sandbox Code Playgroud)

换句话说,我期望绿色边框完全包围内部divs而不仅是黄色边框.

amo*_*era 5

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

#box{
     overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)

要么

#box{
     float:left;
}
Run Code Online (Sandbox Code Playgroud)

您还可以使用display:inline-block#box并不在IE6工作,但