根据孩子的身高,父母div没有达到身高.

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属性旨在允许内容通过包含它的块的底部掉落,因为它旨在用于诸如多个段落应该环绕的图像之类的内容.

有关更多详细信息和示例,请参阅包含浮动.

设置overflow: hidden上#body,以使容器扩大到包含所有里面的浮动元素.或者看一些其他技术.

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

Answer 3

尝试这个：

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