请帮助我理解为什么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而不仅是黄色边框.
当一个孩子浮动时,父母不会包裹它.您可以使用以下两种解决方案:
#box{
overflow:hidden;
}
Run Code Online (Sandbox Code Playgroud)
要么
#box{
float:left;
}
Run Code Online (Sandbox Code Playgroud)
您还可以使用display:inline-block的#box并不在IE6工作,但