敢问路在何方

清除浮动的三种常用方法 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>clearFloat</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .left{
        width: 20%;
        height: 100px;
        float: left;
        background:#343;
    }
    .right{
        width: 20%;
        height: 100px;
        float: right;
        background: #343;
    }
    .box{
        overflow: auto;/*属性法解决浮动*/
        zoom:1;/*兼容ie6*/
    }


    .box2,.box3{
        margin: 30px 0;
    }
    .clear{
        clear: both;
    }


    .box3:after{
        display: block;
        height: 0;
        content: "";
        visibility: hidden;
        clear: both;
    }
    /* 3.使用after伪对象清楚浮动
        注意：必须为需要清除浮动的元素设置 height:0;
                必须设content:'';属性 值为空即可；
     */
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

    <div class="box2">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
        <!--添加空标签清除浮动-->
    </div> 


    <div class="box3">
        <div class="left"></div>
        <div class="right"></div>
        <!--after属性清除浮动-->
    </div> 
</body>
</html>
posted @ 2016-08-11 15:40  敢问  阅读(356)  评论(0)    收藏  举报