Question

Quick question!
Does putting a “clear” element INSIDE a floated div do anything?
Like:

<div style="float: right">
blah blah
<div style="clear: right"></div>
</div>

Somewhere somehow I got the impression that this helps the div expand to contain the content inside of it. What does it actually do? Anything?
Thanks!

Answer 1

An element which contains nothing but floats will collapse in height, because the floated elements are no longer in the normal document flow. In such a case, clearing after the floats will allow the containing element to retain its height.

<div id="container">
    <div id="float1" style="float:left;"></div>
    <div id="float2" style="float:right;"></div>
    <!-- if you use a clearing element, it should go here -->
</div>

Note that there are other ways to clear than using clearing elements, such as adding overflow:hidden; to the container styles.