HTML в IE6 с плавающей четкой проблемой

Question

Кто-нибудь может мне объяснить, почему эти три фрагмента кода отображаются одинаково в IE6 ? (это означает, что 4-й дочерний DIV начинается со второй «строки», а другой «очищается»)

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 - Использование и злоупотребление TIDY HTML (есть онлайн-версии)

Я побежал против твоего дива:

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

И код ...

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

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

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

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

намного чище. Этот сайт может ответить на ваши вопросы о некорректной реализации IE6:

http://css -class.com / статьи / исследователь / плавает / floatandcleartest1.htm