weird float clear issue

Question

I have a pretty basic layout of a floated div for a left menu container column and a full width non floated div with left margin for the content area.

When i place floated div's into the content area they float and place as expected until i clear the float.

The next line of floats then appears not directly below the previous line, but all the way down below the bottom of the menu column

As you can see below there is nothing special about the layout, but the float issue is driving me nuts :)

<div style="float: left; width: 200px; height: 200px; border: 1px solid red;">
    floated left div
</div>
<div style="margin-left: 210px; border: 1px solid blue;">
    non floated right div containing floated divs inside<br />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
    <div style="float: left; border: 1px solid green;">1st float</div>
    <div style="float: left; border: 1px solid green;">2nd float</div>
    <div style="float: left; border: 1px solid green;">3rd float</div>
    <br style="clear: left;" />
</div>

I have made a jsfiddle to demonstrate the issue; http://jsfiddle.net/jP6e9/

Answer 1

The clear property pushes elements past a float in the given direction. Because of the clear: left, those elements are being pushed down past the large floated box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

You can easily create a new block formatting context by setting overflow: hidden on the wider box: http://jsfiddle.net/ExplosionPIlls/jP6e9/7/