floated div inside another floated div problem

I have problem with floating divs.

Current html markup:

<div>
    <div style="float: left;">
        1
        <div style="f开发者_StackOverflow中文版loat: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;" />
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;" />
</div>

Block 2 appears in browsers as a part of Block 1, under Block 3 and 4. What's the problem?

divs are not self-closed tags (such as <br /> and <hr /> and <img />), and closing them in your way, will not close them really!!! In fact your code should look like this:

<div>
    <div style="float: left;">
        1
        <div style="float: left;">
            3
        </div>
        <div style="float: left;">
            4
        </div>
        <div style="clear: both;"></div>
    </div>
    <div style="float: left;">
        2
    </div>        
    <div style="clear: both;"></div>
</div>

Try closing the div after block 4 this way:

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