css的float和position属性

（1）float的简单用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 50px;
            background-color: aqua;
        }
        .div2{
            width: 250px;
            height: 100px;
            background-color: red;
            float: left;
　　　　　　　　
        }
        /*如果加了float，则div3会被div2覆盖，因为div2设置了向左漂浮，会接着找上一个div1的尾部进行漂浮，叫重叠样式表*/
        .div3{
            width: 300px;
            height: 150px;
            background-color: violet;
        }
        .div4{
            width: 450px;
            height: 250px;
            background-color: blue;
        }
        
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>

　　结果如图

如若div2和div3都设置了向左浮动，结果如图

 

如果div3加了clear：left，则不会放在div右边了，会在下面，也就是当div2不是浮动对象了

（2）position属性

1、fixed表示固定位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .div1{
            width: 200px;
            height: 50px;
            background-color: aqua;
            position: fixed;
        }
        /*static一般情况都是默认按这种情况，所以加不加都没影响这里*/
        /*fixed表示固定位置，也是脱离了文档流，覆盖别的标签*/
        .div2{
            width: 250px;
            height: 100px;
            background-color: red;

        }

        .div3{
            width: 300px;
            height: 150px;
            background-color: violet;

        }
        .div4{
            width: 450px;
            height: 250px;
            background-color: blue;
        }

    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>

</body>
</html>


　　效果如图

 

 

 

 

 2、relative表示根据自己之前的位置进行调整

如图

 

 

posted @ 2017-03-10 12:58  蜗牛仔  阅读(153)  评论(0)  编辑  收藏  举报