'display'，'position'和'float'相互关系-优快云博客

本文详细探讨了CSS中'display'、'position'和'float'属性之间的相互作用及优先级，通过具体示例展示了这些属性如何影响网页元素的布局。

本帖最后由 WebAdvocate 于 2010-08-30 17:03:47 编辑

'display'，'position'和'float'相互关系
前面几贴，我们介绍了display，position，float，介绍了他们是如何影响框的生成和框的布局的。那么，这几个特性之间有无制约关系呢，比如，既浮动又是绝对定位的元素，到底应当是浮动还是应当以绝对定位的方式定位呢？带着我们的问题，请看以下3者间的关系。
标准如是说 1. 如果 'display' 的值为 'none'，那么 'position' 和 'float' 不起作用。在这种情况下，元素不产生框。 因为不产生任何框，也就无所谓布局了。
2. 否则，如果 ‘position’ 的值是 'absolute' 或 'fixed'，框就是绝对定位的，’float’ 计算后的值应该是 ’none’，并且，’display’ 会被按照下表设置。框的位置将由'top'，'right'，'bottom'和'left'属性和该框的包含块确定。当元素是绝对定位时，浮动失效，display会被按规则重置。例：

         <
         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属性会被浏览器按照表中的规则重置。典型的例子：

         <
         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中截图： [img=https://lh3.googleusercontent.com/QoGFM6a6M5wYCWIZTyoENAqy-9mganI7E5387_ti_6sjoO-o0HtB22KeYc0gG2XK21TGwAScxtTukvY-QwZRB-lv12oq7T6F47AyLnFHzENzQj1uHw][/img] 其他浏览器： [img=https://lh3.googleusercontent.com/CDq74SkLHABU6k-t2WhwwH-E1NLbxtYvB0yqwyerbc3Tl6M5yqgHLMe4hk_qTT91vhGLkc0XKtA6vA6dZyCtDOyzeuiUVYrEv16q3AvqqoD216YvtQ][/img] 可见，display的值肯定发生了变化。但IE中，又没有按标准设置其值。
4. 如果元素是根元素，display的值按照下表设置。 5. 否则，应用指定的 'display' 特性值。
[img=https://lh3.googleusercontent.com/q-YKn9rd-HQ20VEltdk_rUInwvPcq1bHhaxU-Mj3Ditt85a036VNSh8o446m5vreGadB6kC0gaoI3-Zz1I8Xdqw4mGvSEzdp-j6YqKVZQ8ege4hstg][/img]
总结这一节，可以说是为了调和这三种布局和框形成的关键特性之间的关系的，总的来说，可以把它看作是一个优先级类似的机制，position:absolute 和 fixed 优先级最高，有它存在的时候，浮动不起作用，display的值需要调整；其次是浮动不是’none’的时候，调整 display 的值；最后，如果是根元素，也需要调整 display 的值；最后，非根元素，浮动，绝对定位的时候，才不需要调节display的值。
从另一个侧面也说明了一个问题，浮动或绝对定位的元素，只能是块元素或表格。

转载于:https://www.cnblogs.com/gaoxue/archive/2013/05/17/3083054.html