清除浮动.md

清除浮动的三种方法

1 加空div层(.clear)
2 overflow属性设置(.clearo)
3 :after伪元素(.clearfix)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css"> 
        .div1{width:100%;height:auto;border:2px solid red;}
        .div2{float:left;width:20%;height:80px;background:blue;}
        .div3{float:right;width:30%;height:50px;background-color: lightblue;}
        .div4{width:50%;height:20px;background:green;}
        .clear{clear:both;}
        .clearo{overflow: hidden;zoom:1;}
        .clearfix{zoom:1;}
        .clearfix:after{
            content:"020";/*.点 或 空*/
            display: block;
            clear:both;
            height:0;
            visibility: hidden;
        }
    </style> 
</head>
<body>
    <div class="div1 clearfix">
        <div class="div2">left</div>
        <div class="div3">right</div>
        <div class="div4 clear"></div>
    </div>

</body>
</html>
posted @ 2017-09-27 09:50  tongyongliang  阅读(111)  评论(0)  编辑  收藏  举报