css浮动

1.浮动

　　float属性可用值

　　　　left：元素向左浮动

　　　　right：元素向右浮动

　　　　none：元素不浮动

　　　　inherit：从父级继承浮动属性

　　注意：float在绝对定位和display为none时不生效

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            height: 150px;
            background-color: aquamarine;
            float: left;
        }
        .two{
            float: left;
            width: 150px;
            background-color: pink;
        }
        .three{
            float: left;
            background-color: plum;
        }
        .container{
            width: 300px;
            height: 300px;
            background-color: grey;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="one">i am div1</div>
        <div class="two">i am div2</div>
        <div class="three">i am div3</div>
        helloworld
    </div>
</body>
</html>

 

2.clear属性

　　去掉浮动属性（包括继承来的属性）

　　clear属性值：

　　　　　　left，right：去掉元素向左，向右浮动

　　　　　　both：左右两侧均去掉浮动

　　　　　　inherit：从父级继承来clear的值

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text1{
            float: right;
            position: absolute;
            background-color: aqua;
        }
        .text2{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="text1">
        我将出现在屏幕右方
    </div>
    <div class="text2">
        注意我出现的位置
    </div>
</body>
</html>

 

posted @ 2017-06-12 19:43  noooooob  阅读(105)  评论(0)  编辑  收藏  举报