如何在div中使用"float:left"而不破坏包含元素的高度？

Question

似乎浮动的HTML元素不会扩展其容器的高度.例如,请考虑以下代码:

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

注意灰色背景的包含div比红色div短,红色div扩展到容器边界之外.我希望包含元素扩展到其内容的大小,包括浮动元素.

有没有一个优雅的解决方案来实现这一点,最好是一个不涉及设置固定高度或使用JavaScript？

Answer 1

添加overflow: auto包含元素:

.portfoliosite {
    background: #777;
    padding: 10px;
    width: 550px;
    overflow: auto;
}
.portfoliothumbnail {
    background: red;
    margin: 0 10px 10px 0;
    float: left;
    height: 150px;
    width: 150px;
}

<div class="portfoliosite">
    <div class="portfoliothumbnail"><!-- Img tag goes here --></div>        
    <p class="portfoliotitle">AwesomeSite.Com</p>
    <p class="portfoliodescription">An awesome site I did. It launched on Jan 1, 2009</p>        
</div>

请参阅:http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats

Answer 2

是.当div关闭时你应该清除你的浮动.

<div>
  <div style="float:left">Floated Div</div>
  <div style="clear:both;" />
</div>