【分享】說說標準——CSS核心可視化格式模型(visual formatting model)之十二

'display'，'position'和'float'相互關係

前面幾貼，我們介紹了display，position，float，介紹了他們是如何影響框的生成和框的佈局的。
那麼，這幾個特性之間有無制約關係呢，比如，既浮動又是絕對定位的元素，到底應當是浮動還是應當以絕對定位的方式定位呢？
帶着我們的問題，請看以下3者間的關係。

標準如是說
1. 如果 'display' 的值爲 'none'，那麼 'position' 和 'float' 不起作用。在這種情況下，元素不產生框。
因爲不產生任何框，也就無所謂佈局了。

2. 否則，如果 ‘position’ 的值是 'absolute' 或 'fixed'，框就是絕對定位的，’float’ 計算後的值應該是 ’none’，並且，’display’ 會被按照下表設置。框的位置將由'top'，'right'，'bottom'和'left'屬性和該框的包含塊確定。
當元素是絕對定位時，浮動失效，display會被按規則重置。
例：

HTML code

<script type="text/javascript"> function getStyle(obj, style) { var _style = (style == "float") ? "styleFloat" : style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })]; } window.onload = function() { document.getElementById("info").innerHTML = "float : " + getStyle(document.getElementById("test"), "float") + "<br/>display : " + getStyle(document.getElementById("test"), "display"); } </script> <div id="test" style="position:absolute; float:left;display:inline;"></div> <div id="info"></div>

IE中，float值和display的值未發生變化，還是 “float : left; display : inline”。
其他瀏覽器中計算後的結果是：”float : none; display : block”。

在IE裏，這時候需要小心了。

3. 另外，如果'float'的值不是'none'，該框浮動並且 ’display’ 會被按照下表設置。
當元素浮動時，display屬性會被瀏覽器按照表中的規則重置。
典型的例子：

HTML code

<script type="text/javascript"> function getStyle(obj, style) { var _style = (style == "float") ? "styleFloat" : style; return document.defaultView ? document.defaultView.getComputedStyle(obj, null).getPropertyValue(style) : obj.currentStyle[_style.replace(/-[a-z]/g, function() { return arguments[0].charAt(1).toUpperCase(); })]; } window.onload = function() { document.getElementById("info").innerHTML = "display : " + getStyle(document.getElementById("test"), "display"); } </script> <span id="test" style="width:100px; height:100px; border:1px solid red; float:left;">float span</span> <div id="info"></div>

按照規則，span 是 inline 的元素，因此不能夠設置其寬度和高度。但是浮動後呢？
IE中截圖：

其他瀏覽器：

可見，display的值肯定發生了變化。但IE中，又沒有按標準設置其值。

4. 如果元素是根元素，display的值按照下表設置。
5. 否則，應用指定的 'display' 特性值。



總結
這一節，可以說是爲了調和這三種佈局和框形成的關鍵特性之間的關係的，總的來說，可以把它看作是一個優先級類似的機制，position:absolute 和 fixed 優先級最高，有它存在的時候，浮動不起作用，display的值需要調整；其次是 浮動不是’none’的時候，調整 display 的值；最後，如果是根元素，也需要調整 display 的值；最後，非根元素，浮動，絕對定位的時候，纔不需要調節display的值。

從另一個側面也說明了一個問題，浮動或絕對定位的元素，只能是塊元素或表格。

原文地址：

http://topic.csdn.net/u/20100830/16/f22e36e2-32ef-467a-820c-f585b4aaa782.html?21350