CSS清浮动技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/GYZ_Code/article/details/54933191

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清浮动</title>
    <style type="text/css">

        .father{border:1px solid red;margin:  90px auto;overflow: hidden;zoom:1;}

        .child{width: 200px;height:300px;background: blue;float: left;}
    /*  
    .clear:after{content: "";display: block;clear: both;}
    ..clear{zoom:1;}
    */

        /*
            清浮动方法总结;
            1.在浮动元素下面加上<div class="clear"></div>

                                .clear{clear:both;}

            2. 在浮动元素下加<br clear="all" />

            3.给浮动元素父级加上：<div class="father clear" >

                                  .clear:after{content:"";display:block;clear:both;}

                                  .clear{zoom:1;}

              注意事项：
                在IE6，IE7下不支持after伪类，所以要配合zoom属性来清浮动，解决兼容性问题
              扩展：
                在IE6,IE7下父级有宽度就不用清浮动

                haslayout（默认状态下是false）根据元素内容大小或者父级的大小来重新计算元素的宽高，使用以下样式会被激活：
                width:(任何值除了auto);
                height:(任何值除了auto);
                display:inline-block;
                float:left/right;
                zoom:(除normal之外任何值);

            4.给浮动元素父级加上overflow：hidden/auto
                                zoom:1;
              注意事项;在IE6中overflow没有包住浮动元素的作用，即没有提升层级的作用，所以要配合zoom一起使用

         */
    </style>
</head>
<body>

    <div class="father clear" >

        <div class="child"></div>

    </div>

</body>
</html>

清浮动常见方法总结