父级div不根据其子元素的高度而自适应高度。

Question

父级div不根据其子元素的高度而自适应高度。

5

这是我的代码：

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，那就没问题了。

- Keld Jakobsen

您已经有一个<body>元素/标签了，请不要重复使用。如果您将body元素设置为overflow:hidden;，它将正确地包围内容。 - Jawad

4个回答

12

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

有关详细信息和示例，请参见包含浮动元素。

在#body上设置overflow: hidden可使容器扩展以包含其中的所有浮动元素。或者，请参见一些其他技术。

另一种方法，虽然在特别旧的Internet Explorer版本中无法使用，但是可以使用display: inline-block代替float。

- Quentin

4

 #body { 
    overflow:hidden;
 }

- Sameh Serag

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>

- voy

@RepWhoringPeeHaa：这是一种做法。Overflow: hidden; 也有它的问题。 - Jawad

只有在使用新的东西，比如阴影效果时才会出现。@Jawad。或者我错过了什么？ - PeeHaa

@Jawad 有两篇文章也在说我所说的内容吗？ - PeeHaa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- SVS · Accepted Answer

将 overflow:hidden 添加到 #body 的 CSS 中。

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

或者

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