4

这是我的代码：

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 就可以了

4

4 回答 4

23

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

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

或者

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

于 2012-06-04T10:14:43.133 回答
12

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

有关更多详细信息和示例，请参阅包含浮点数。

设置overflow: hidden为#body使容器扩展以包含其中的所有浮动元素。或者看看其他一些技巧。

另一种方法是display: inline-block使用float.

于 2012-06-04T10:14:51.323 回答
4 
 #body { 
    overflow:hidden;
 }
于 2012-06-04T10:16:54.940 回答
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>
于 2012-06-04T10:14:02.260 回答