IE6中的HTML浮動清除問題

有人可以向我解釋爲什麼這三個代碼片段在中顯示完全一樣IE6？（意味着第四子DIV開始在第二 '線'，而另一個則 '清除'）IE6中的HTML浮動清除問題

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

來源

2011-01-05 Ropstah

這將是更容易在視覺上差異很多，如果你會使用一個或兩個CSS類。 – Phrogz 2011-01-05 02:20:50

1-使用整齊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

來源

2011-01-05 02:30:35 turtlepick

IE6中的HTML浮動清除問題

回答

相關問題