【分享】说说标准——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 : bloc k”。

在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