HTML in IE6 schwimmende klare Problem

Question

Kann mir jemand erklären, warum diese drei Codefragmente genau das gleiche in IE6 anzeigen? (Was bedeutet, dass das 4. Kind DIV beginnt auf der zweiten 'line', während ein anderer ist 'gelöscht')

1:

<div id="wrap"> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
    <div></div> 
    <div></div> 
</div> 

2:

<div id="wrap"> 
    <div></div> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
    <div></div> 
</div> 

3:

<div id="wrap"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <!-- below is cleared --> 
    <div class="clear"></div> 
</div> 

CSS:

#wrap { 
    position:relative; 
    width:1000px; 
    height:400px; 
    padding:0px; 
    margin:0px; 
    border:solid 1px black; 
} 

#wrap div { 
    float:left; 
    width:150px; 
    height:100px; 
    background-color:blue; 
    padding:0px; 
    margin:0px; 
    border:solid 1px black; 
} 

.clear { 
    clear:left; 
} 

Answer 1

1- Gebrauch und Missbrauch von TIDY HTML (es gibt Online-Versionen)

ich gegen Ihre div lief:

<style type="text/css"> 
/*<![CDATA[*/ 
    div.c3 {position:relative;width:1000px;height:400px;padding:0px;margin:0px;border:solid 1px black;} 
    div.c2 {clear:left;float:left;width:150px;height:100px;background-color:blue;padding:0px;margin:0px;border:solid 1px black;} 
    div.c1 {float:left;width:150px;height:100px;background-color:blue;padding:0px;margin:0px;border:solid 1px black;} 
    /*]]>*/ 
    </style> 

Und Code ...

<div class="c3"> 
    <div class="c1"></div><!-- below is cleared --> 

    <div class="c2"></div> 

    <div class="c1"></div> 

    <div class="c1"></div> 
    </div> 

Viel sauberer. Diese Seite könnte Ihre Fragen über die Buggy IE6 Implementierung beantworten:

http://css-class.com/articles/explorer/floats/floatandcleartest1.htm