CSS中IE6浮動模型Bug詳解_CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
CSS浮動模型可以說是標準布局中不可或缺的組成部分，可是對于浮動模型在IE6的表現癥狀你是否已經完全了解或者把握呢？假如你的答案是肯定的，那恭喜你不用聽我的啰嗦了，假如你的答案是模糊的，那么下面的討論或許對你以后的學習有所幫助。
首先看一下W3C對浮動模型部分解釋（http://www.w3.org/TR/REC-CSS2/visuren.html）：
從中我們可以得到幾個基本信息：
那么讓我們看看IE6是否也是按照這個原則來解析的呢。實際情況是，IE6又開始了“個人英雄主義”，和標準解析有所出入。
那具體出入在那里，出入大小如何，下面，我們用例子來分析（為了書寫的方便，所有代碼將把CSS直接帶入到XHTML中）：
假如對浮動的div不設置寬度，div的寬度將按照實際內容的寬度自適應，為了后面的直觀表現和實驗的方便，我們給浮動div設置寬度100px和高度100px，并且為了更好的區分元素的區域，我們分別給浮動div和非浮動的p設置背景色，給浮動div設置margin-top值，修改如下：
測試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.
首先看一下W3C對浮動模型部分解釋（http://www.w3.org/TR/REC-CSS2/visuren.html）：
示例代碼 [www.zhaotila.cn]
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.
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.
從中我們可以得到幾個基本信息：
示例代碼 [www.zhaotila.cn]
1、假如浮動元素在非浮動塊元素之后，則浮動元素將會出現在非浮動塊元素的下方；
2、假如浮動元素在非浮動塊元素之前，則非浮動塊元素內容將會顯示浮動塊元素行后。
3、在浮動元素之后的非浮動塊元素會無視該浮動元素的存在，顯示在與浮動元素開始的位置，浮動元素顯示在非浮動塊元素之上。
2、假如浮動元素在非浮動塊元素之前，則非浮動塊元素內容將會顯示浮動塊元素行后。
3、在浮動元素之后的非浮動塊元素會無視該浮動元素的存在，顯示在與浮動元素開始的位置，浮動元素顯示在非浮動塊元素之上。
那么讓我們看看IE6是否也是按照這個原則來解析的呢。實際情況是，IE6又開始了“個人英雄主義”，和標準解析有所出入。
那具體出入在那里，出入大小如何，下面，我們用例子來分析（為了書寫的方便，所有代碼將把CSS直接帶入到XHTML中）：
示例代碼 [www.zhaotila.cn]
<div style="float:left;">這是浮動區塊內容。</div>
<p>這是非浮動的段落</p>
<p>這是非浮動的段落</p>
假如對浮動的div不設置寬度，div的寬度將按照實際內容的寬度自適應，為了后面的直觀表現和實驗的方便，我們給浮動div設置寬度100px和高度100px，并且為了更好的區分元素的區域，我們分別給浮動div和非浮動的p設置背景色，給浮動div設置margin-top值，修改如下：
示例代碼 [www.zhaotila.cn]
<div style="float:left; width:100px; height:100px; background:#e00; margin-top:10px;">這是浮動區塊內容</div>
<p style="background:#ccc;">這是非浮動的段落</p>
<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.
相關CSS教程：
- 相關鏈接：
- 教程說明：
CSS教程-CSS中IE6浮動模型Bug詳解
。