参考链接：https://blog.csdn.net/h_qingyi/article/details/81269667

目的：

为了解决父元素因为子级元素浮动引起的内部高度为0的问题。
请看：当我不给父元素高度，只给子元素高度时，子元素会把父元素撑开。

<body>
    <div class="parent">
        <div class="child1">
        </div>
        <div class="child2">
        </div>
    </div>
</body>
<style>
.parent{
    border:chartreuse 2px solid;
}
.child1{
    width: 100px;
    height: 100px;
    background-color: red;
}
.child2{
    width: 100px;
    height: 100px;
    background-color: blue;
}

图片说明

当我将两个子元素浮动时：
图片说明
图片说明
子元素浮动之后，父元素就成了一条线

清除浮动的方法

1、额外标签法（在最后一个浮动标签后，加一个标签，设置clear：both）（not good）

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"> </div>
        <div class="clear">额外</div>
    </div>
</body>
<style>
.parent{
    border:chartreuse 2px solid;
}
.child2{
    float:left;
    width: 100px;
    height: 100px;
    background-color: blue;
}
.child1{
    float:left;
    width: 100px;
    height: 100px;
    background-color: red;
}
.clear{
    clear:both;
}

图片说明

优点：方便
缺点：添加无意义标签，语义化差

2、父级添加overflow属性（not good）

用于触发BFC属性，触发之后就可以包含浮动元素
有关BFC，请看： css之BFC原理 

.fahter{
        width: 400px;
        border: 1px solid deeppink;
        overflow: hidden;
    }

优点：代码简洁
缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

3、使用after伪元素清除浮动（good）

给父元素设置

.clearfix:after{
    content:"";
    display:block;
    height: 0;
    clear:both;
    visibility: hidden;
}
 .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

优点：符合闭合浮动思想，结构语义化正确

缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

4.使用before和after双伪元素清除浮动

（说实话，只有after不就可以了吗？不懂）

 .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

优点：代码更加简洁