如何使用“float：left”在div中不破坏包含元素的高度？ [英] How can I use "float: left" in a div without breaking the containing element's height?

问题描述

看起来，浮动的HTML元素不会扩展其容器的高度。例如，考虑以下代码：

It seems that floated HTML elements don't expand the heights of their containers. For example, consider the following code:

<div class="portfoliosite" style="background: #777777; padding: 10px; width: 550px;">
    <div class="portfoliothumbnail" style="background: red; margin: 0 10px 10px 0; float: left; height: 150px; width: 150px;"><!-- 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>

它会在Firefox，Opera，Chrome上显示，并且在某些情况下out））：

It renders like this on Firefox, Opera, Chrome, and (in some circumstances I haven't figured out yet) on IE:

请注意，包含灰色背景的div比红色div短，红色div延伸到容器的边界之外。我想让contains元素扩展到其内容的大小，包括浮动元素。有没有一个优雅的解决方案来完成这个，最好是一个不涉及设置固定高度或使用Javascript？

Notice how the containing div with the gray background is shorter than the red div, and the red div extends outside the container's boundaries. I'd like the containing element to expand to the size of its contents, including the floated element. Is there an elegant solution for accomplishing this, preferably one that doesn't involve setting a fixed height or using Javascript?

推荐答案

overflow ：auto

overflow: auto

包含元素。

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

这篇关于如何使用“float：left”在div中不破坏包含元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！