CSS：清除浮动div内的内容有什么用？

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.

Answer 2

In your example, since the div with clear: right is nested, it doesn't clear anything. Float applies to elements at the same level. If the divs were at the same level, the second div would appear below the div that has float: right. This page has some good explanations/examples of how float works: float tutorial

Answer 3

In your case, not much effect. the enclosed div (clear: right) is as good as redundant.

<div style="float: right; background: red;" >
blah blah
<div style="clear: right; background: blue;"></div>
</div>

With this, you can visually see if you enclosed div made a difference.