02-CSS基础与进阶-day8_2018-09-10-20-14-46

浮动的清除
1 清除浮动的原因
浮动不清楚对周围的元素布局造成影响，浮动的元素也不能撑开父亲

2 清除浮动的方案
i 给浮动元素所在父盒子增加高度,关住浮动，但是一般工程上，我们不对父盒子I设置高度，父盒子高度由儿子撑开
ii clear:both
清除左右浮动的影响，浮动元素所在父盒子没有设置高度，可以由儿子撑开
iii overflow:hidden
可以通过触发BFC的方式，实现清除浮动效果
iv 利用after伪元素

v 双伪元素

01为什么清除浮动.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            background-color: green;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="wrap1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

02清除浮动-给父亲增加高度.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            height: 100px;
            background-color: green;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="wrap1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

03清除浮动-clear属性.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            background-color: green;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }

        .clear {
            clear: both; /*清除浮动 */
        }
    </style>
</head>
<body>
    <div class="wrap1">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="clear"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

04清除浮动-overflow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            background-color: green;
            overflow: hidden;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }
    </style>
</head>
<body>
    <div class="wrap1">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

05清除浮动-利用伪元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            background-color: green;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }
         
         /*伪元素产出的是行内元素*/
        .clearfix::after {
            content: "."; /*尽量加不要空 */
            display: block; /*转块元素*/
            clear: both; /*清除浮动*/
            height: 0;   /*高度为0*/
            visibility: hidden;/*隐藏盒子*/
        }
        .clearfix {
            *zoom: 1; /* zoom是ie6 7 清除浮动用的属性 
                         *表示该属性只有ie6 7 识别
                     */
        }
    </style>
</head>
<body>
    <div class="wrap1 clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

06清除浮动元素-双伪元素.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .wrap1 {
            width: 600px;
            background-color: green;
        }

        .wrap1 .son1 {
            width: 150px;
            height: 100px;
            background-color: pink;
            float: left;
        }

        .wrap1 .son2 {
            width: 280px;
            height: 100px;
            background-color: skyblue;
            float: left;
        }

        .wrap2 {
            width: 680px;
            height: 300px;
            background-color: purple;
        }
        
        /* 推荐使用  代码简洁*/
        .clearfix:before, 
        .clearfix:after {
           content: "";
           display: table; /* 触发BFC BFC可以清除浮动*/   
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

        .wrap2:after {
            content: "abc";
        }
    </style>
</head>
<body>
    <div class="wrap1 clearfix">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
    <div class="wrap2"></div>
</body>
</html>

02-CSS基础与进阶-day8_2018-09-10-20-14-46

猜你喜欢