CSS中Position、Float属性深入探讨

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性，对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨。

　　 HTML的普通流

　　浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。(如下图)

<style type="text/css">
  div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
  strong { background: #808080; }
  em { background: #ffd800; }
  span { background: #b6ff00; }
</style>
<strong>strong</strong><em>em</em><span>span</span>
<div style="background: blue">A</div>
<div style="background: red">B</div>
<div style="background: green">C</div>

　　我们先用块状元素来做个示例：

<style type="text/css">
div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }
</style>
<div style="background: blue">A</div>
<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>
<div style="background: green">C</div>

　　我们再来看看行内元素(在这里用大家最常用的span来做示例)

<style type="text/css">
strong { background: #808080; }
em { background: #ffd800; }
span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }
</style>
<strong>strong</strong><em>em</em><span>span</span>

　　请注意看，在这里我是有对span进行width属性的赋值(为100px)。但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，换而言之， position: relative并没有改变行内元素的Display属性，这个概念非常重要(注意与接下来的absolute的区别)。

　　Absolute

　　俗称的绝对定位，绝对定位是相对而言的，怎么理解呢?应用了position: absolute的元素会循着节点树中的父(祖)元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父(祖)元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性(重点)!

　　我们先用一个默认嵌套的DIV来做示例

<body style="background: yellow;">
    <div style="background: #fff">
        A
        <div style="background: #81b6ff">
            A - 1
            <div style="background: #b6ff00;">
                A - 2
            </div>
        </div>
    </div>
</body>

　　现在我们对A-2这个p设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素(A、A-1)设置任何的position值

<body style="background: yellow;">
    <div style="background: #fff">A        
    <div style="background: #81b6ff">A - 1            
    <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">
                A - 2</div></div></div></body>

　　可以看到(A-2)最终是根据body来产生了位移，让我们对比分别设置一下父元素position。

　　从上面的图，我们可以总结以下几个结论。

　　1)块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto(会受到父元素的宽度影响)。

　　2)元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。

　　1)应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。

　　2)position: absolute忽略根元素的padding。

<div id="a" style="background: #fff; width: 200px;">A
    <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1
        <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2
        </div>
    </div>
</div>

　　 3)在IE6/7中设置position属性后会导致z-index属性失效

<!-- 解决方案，父元素设置一个更大的z-index值即可 -->
<div style="z-index: 2;">
  a
    <div style="position: relative; z-index: 1;">
      b
    </div>
</div>

　　 4)行内元素在应用了position：absolute之后会改变display。

<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">
        我的display属性由inline变成了block</span>

　　5)应用了position: absolute / relative之后，会覆盖其他非定位元素(即position为static的元素)，如果你不想覆盖到其他元素，也可以将z-index设置成-1。

　　1)元素同时应用了position: relative、float、(top / left / bottom / right)属性后，则元素先浮动到相应的位置，然后再根据(top / left / bottom / right)所设置的距离来发生偏移。

　　2)元素同时应用了position: absolute及float属性，则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">
我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。</div>

　　3)第一个元素应用了position之后会覆盖着接下来的float元素(如果两个元素所处的位置相同)

<div style="position: absolute; left:10px; top: 10px;">
    我是一个应用了position：absolute的DIV。
    </div><div style="float:left; background: red; width: 300px; height: 150px; ">
    我是float：left的DIV</div>

回顾：如果你不将float的元素的position设置成relative的话，
你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。
同理，float元素下面存在position: absolute的子元素，
如果你不将float的元素的position设置成relative的话，absolute元素是不会定位到float元素的。

　　4)同时应用position: absolute和float: left会导致清除浮动无效(position:
relative则可以清除浮动)。

　　常用的清除浮动的方法有两种：

　　1.通过在容器中添加一个标签，设置该标签的样式为 clear: both

　　2.容器设置overflow: hidden

<div style="background: #fff; width: 100%; overflow: hidden;">
    <div style="float: left; position: absolute;">我是DIV</div>
    <div style="clear: both;"></div><div>

以上就是CSS中Position、Float属性深入探讨的内容，更多相关内容请关注PHP中文网（HdhCmsTestgxlcms测试数据）！

查看更多关于CSS中Position、Float属性深入探讨的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did69672

更新时间：2022-10-19 阅读：42次