清除浮动.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>

巴特西

清除浮动.md

清除浮动的三种方法

1 加空div层(.clear)

2 overflow属性设置(.clearo)

3 :after伪元素(.clearfix)

最新文章

热门文章