Clear float among contiguous float entites in IE6

HTML:

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

CSS:

    div {
    background:red;
    width:50px;
    height:50px;
    margin:5px;
    float:left开发者_开发问答;
    }
    .clear {
        clear:left;
    }

Take 1,2,3,4 as div layout position in sequence.

The standards-compliant browser layout is:

1

2 3 4

while IE6 weirdly render as:

1 3 4

2

In IE6 the float entity static 'baseline' won't change even the previous element have set clear.

How to fix this bug??

IE 6 & 7 were affected by this.

Use the tried and true <br> float clearer

http://jsfiddle.net/pxfunc/ce4UK/

HTML:

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

CSS:

div {
    background:red;
    width:50px;
    height:50px;
    margin:5px;
    float:left;
}
.clear {
    clear:left;
}