css - 清除 IE6 中连续 float 实体之间的 float

Question

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;    }

依次将1,2,3,4作为div布局位置。

符合标准的浏览器布局是:

1

2 3 4

而 IE6 奇怪地呈现为:

1 3 4

2

在 IE6 中， float 实体静态“基线”不会改变，即使之前的元素已设置为 clear。

如何修复这个错误？？

Answer 1

IE 6 和 7 受此影响。

使用久经考验的 <br>漂浮更清晰

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;
}