【把旧账号的文章搬过来】css自我总结之第一弹:绕不开的float,relative与absolutee

Css自我总结之第一弹：

1. float，relative，absolute

一开始，每一个元素就像是水里的石头一样安分地待着，后来来了float,relative,absoｌｕte三个大力士誓要搬动石头。

Float：名如其人，会施魔法让石头变成浮萍，大家亲亲蜜蜜地挤在了一起。然而需要注意的是：1，浮萍也是占地方的！它还是会占据文档流！

2. 不等高时排版会出现参差不齐的状态。

3.清除浮动，它浮起来了，后面的石头就顶上来了。

Position:relative:这位会“镜像魔法”，理论上元素还待在原来的地方，但“看起来”他在别的地方了。这位仁兄有几个特点：

1. 相对自身定位，即：top:0,left:0对他来说就是待在原地。

2. 不会影响其他元素布局。由于它相对自身定位，所以不会产生float和absoｌｕte那样有元素顶上来的情况。

例：

<html>  
<body>  
        <div style="background-color: red;width:100px;height:100px;"></div>  
        <div style="background-color: blue;width:100px;height:100px;position:relative;top:-50px"></div>  
        <div style="background-color: yellow;width:100px;height:100px;"></div>  
    </body>  
</html>

可以将第二个div的position改为relative试一下

3. 当top/bottom和left/right对立属性同时存在时，relative表现为相互斗争。上下存在时听上的，左右存在时听左的【不要以为上右下左而记成左右存在听右的】

4. position:absolute这位神通广大，身负盛名，它能让好好的石头变成一团虚影任你揉捏，指哪定哪毫不含糊。这位大家太熟悉了，只说一个让我吃了一个亏的特性。Absoulte根据不是“position:static”【默认值】的父元素定位，父元素不是就再往上找一直找到尽头body为止。然而找到body后，它并不是向人们说的那样根据body定位，而是根据浏览器定位！！！！！！

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
        body{  
            width:100%;  
            height:2000px;  
        }  
        .ab{  
            background-color:red;  
            width:100px;  
            height:100px;  
            position:absolute;  
            bottom:100px;  
            right:50px;  
        }  
        </style>  
    </head>  
    <body>  
          
        <div class="ab" ></div>  
    </body>  
</html>

显示效果为：