CSS中IE6浮動模型Bug詳解

　　CSS浮動模型可以說是標準布局中不可或缺的組成部分，可是對於浮動模型在IE6的表現癥狀你是否已經完全瞭解或者掌握呢？如果你的答案是肯定的，那恭喜你不用聽我的嗦了，如果你的答案是模糊的，那麼下面的討論或許對你以後的學習有所協助。
　　首先看一下W3C對浮動模型部分解釋（http://www.w3.org/TR/REC-CSS2/visuren.html）：
　　Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float. 
　　A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float. When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is transparent. The content of the block box is rendered in front of the float. 
　　從中我們可以得到幾個基本資料：
　　1、如果浮動元素在非浮動塊元素之後，則浮動元素將會出現在非浮動塊元素的下方；
2、假如浮動元素在非浮動塊元素之前，則非浮動塊元素內容將會顯示浮動塊元素行後。
　　3、在浮動元素之後的非浮動塊元素會無視該浮動元素的存在，顯示在與浮動元素開始的位置，浮動元素顯示在非浮動塊元素之上。
　　那麼讓我們看看IE6是否也是按照這個原則來解析的呢。實際情況是，IE6又開始了“個人英雄主義”，和標準解析有所出入。

　　那具體出入在那裡，出入大小如何，下面，我們用例子來分析（為了書寫的方便，所有代碼將把CSS直接帶入到XHTML中）：

範例程式碼 [www.mb5u.com]

<div style="float:left;">這是浮動區塊內容。</div>
<p>這是非浮動的段落</p>

　　假如對浮動的div不設定寬度，div的寬度將按照實際內容的寬度自適應，為了後面的直觀表現和實驗的方便，我們給浮動div設定寬度100px和高度100px，並且為了更好的區分元素的地區，我們分別給浮動div和非浮動的p設定背景色，給浮動div設定margin-top值，修改如下：

範例程式碼 [www.mb5u.com]

<div style="float:left; width:100px; height:100px; background:#e00; margin-top:10px;">這是浮動區塊內容</div>
<p style="background:#ccc;">這是非浮動的段落</p>

　　測試IE6和Firefox瀏覽器，我們會發現非浮動塊元素p在沒有設定寬度的情況下，佔據整個顯示地區的寬度（或者準確點說，是佔據所在的容器的整個寬度）。

　　下面我們將對非浮動元素p設定寬度非auto值，比如width:200px或者width:20%，這時我們會發現IE6和Firefox下，發生了變化。

　　Firefox還是按照上面的解析方式來解析，而IE卻不再是，開始解析為從浮動元素的右側邊開始計算寬度。或許有人問這是為什麼呢，其實這個是有根源的，是IE的layout問題，假如你對layout還不熟悉，依然推薦閱讀old9翻譯的《On having layout》。

　　最後建議對浮動元素後的非浮動塊元素，盡量不要制定其寬度或高度，以便引起IE6的“個人英雄主義”，而改換使用margin來定位。注重：假如浮動元素不是圖片，則在IE下，兩個元素之間會產生 3個像素的間隙BUG.