Question

这是我的代码：

HTML

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
</div>

CSS：

#body {    width: 520px;    border:solid 10px #d2d2d2;}
#left { float:left;width:170px;height:200px}
#main { float:left;width:170px;height:400px}
#right { float:left;width:170px;height:200px}

为什么#body不包围div＃left，＃div＃main，div＃right

如果我设置display：table就可以了

Answer 1

添加溢出：隐藏到#body css。

#body {    width: 520px;    border:solid 10px #d2d2d2; overflow:hidden;}

或

在父元素上使用任何类（例如clearfix）。请参阅CSS Trick文章以供参考： https://css-tricks.com/snippets/css/clear-fix/

Answer 2

float属性旨在允许内容通过包含它的块的底部掉落，因为它旨在用于诸如多个段落应该环绕的图像之类的内容。

有关详细信息和示例，请参阅containing floats。

在overflow: hidden上设置#body以使容器展开以包含其中的所有浮动元素。或者，请参阅some other techniques。

另一种方法，虽然在特别旧版本的Internet Explorer中不起作用的方法是使用display: inline-block而不是float。

Answer 3

 #body { 
    overflow:hidden;
 }

Answer 4

试试这个：

<div id="body">
    <div id="left">a</div>
    <div id="main">b</div>
    <div id="right">c</div>
    <div style="clear:both;"></div>
</div>

根据孩子的身高，父母div没有达到身高。

4 个答案: