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（有在线版本）

我遇到了你的div：

<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/articles/explorer/floats/floatandcleartest1.htm

IE6中的HTML浮动明显问题

1 个答案: