关于解决清除浮动的五大方法_display flex清除浮动-CSDN博客

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.csdn.net/XZZ2222/article/details/79475490

1、直接父级定义heght（不推荐使用）

2、结尾处加空div标签clear:both

3、父级div定义overflow:hidden，也就是开启BFC

注：IE6不支持BFC，使用zoom:1,这是开启HasLayout模式，其它浏览器不支持

4、父级div定义伪类after

解决步骤：

 1、伪元素在外容器最后增加内容,伪元素现在只能添加文字和图片
 2、在最后添加字符"."
 3、设置display让添加的字符.变成块元素
 4、使用clear:both清除左右浮动,容器会扩大到.元素的下方
 5、设置这个块元素的高度为0，这时候外容器就会扩大到.元素的上方，但是.还显示
6、上面已经使用过display设置块，因此不能使用它隐藏只能使用visibility: hidden
7、设置让所有的ie浏览器支持，因此增加zoom:1

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动</title>
    <style>
       #div0{
           border: 1px solid black;
       }
        .floats{
            width: 100px;
            height: 100px;
            background-color: darkkhaki;
            float: left;
        }
        .clearFloat::after{
            content: ".";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .clearFloat{
            zoom: 1;
        }
    </style>
</head>
<body>
<div id="div0" class="clearFloat">
    <div class="floats"></div>
    <div class="floats"></div>
    <div class="floats"></div>
</div>

</body>
</html>