How can I use “float: left” in a div without breaking the containing element's height?

Question

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

相关标签:

Answer 1

I would highly recommend NOT to use hacks like ClearFix. If you're trying to save a <div class="clear"></div> because it's not "semantic" you're going to set yourself up trouble down the line. Best, if you know your layout won't change, or you can tell for sure what the next element is, you can use the next element to clear previous "floats". If you need something modular, like a piece of HTML that can be inserted in various places, then always add the clearing DIV.

Also regarding David's comment:

<div style="clear:both;" />

Be careful as that is not valid HTML or XHTML. Although it seems valid from a XML point of view, it does not respect the document definition (whatever it's called, which is referred to by the DOCTYPE tag). In other words, the DIV is defined as an element that opens, and closes with a separate closing tag. Contrary to a <BR/> for example, which allows for "self-closing". Granted, Firebug and possibly other web developer tools, will sometimes show DIVs that way but that's just how they display it.

PPS: at my job I've found that this worked well in some layouts to fix inconsistent vertical spacing between elements when clearing DIVs in IE6 and other browsers:

Cross browser clearing:

div.clear { clear:both; overflow:hidden; height:0; }

<div class="clear"></div>

Don't use an inline style for this, ever. First you will need it often, and second, as yo ucan see above, it may come in handy to change the clear rule to fix some cross browser troubles.

Answer 2

Renders fine in my IE7 on Vista. What version of IE & what platform are you using?

Answer 3

You need to clear the float Clear Fix

Some more information

Answer 4

Add overflow: auto on the containing element:

.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>

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

Answer 5

Yes. You should clear your float when div's closing.

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

Answer 6

You need to clear the float, which returns document flow back to normal. Use clear:left (or right, or both if such floats need to be cleared) on the last element that should reset the flow. Also read up on ClearFix. It should be noted that ClearFix can get a little sticky with IE... if you have control over the markup, sometimes it is safer to use the traditional clear.