清除浮动的本质：为了解决父级元素印子级浮动引起内部高度为0的问题。
方式1:额外标签法（w3c推荐的方法）： 在最后一个浮动标签后，新添加一个标签
优点：通俗易懂，书写方便。
缺点：不推荐使用，添加许多无意义的标签，结构化较差。
.clear{
clear:both;
width:0;
height:0;
}
方式2:父级添加overflow属性方法
.father{
overflow:hidden;
}
优点：代码简捷。
缺点：内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
方法3:为父元素添加after伪元素清除浮动
.clearfix:after{
content:"";//设置内容为空
height:0;//高度为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfix{
*zoom:1;//zoom:1 就是IE6清除浮动的方式，* ie7以下的版本所识别
}
优点：符合闭合浮动思想，结构语义化正确。
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
扫描二维码关注公众号，回复：
3996214 查看本文章
方法4:为父元素添加before和after双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
优点：代码更简洁
缺点：由于IE6-7不支持：after，使用zoom：1触发hasLayout。
方法5:为父元素设置具体的宽和高的值
.father{
height:100px;//计算具体的值
width:100%;
}
优点：通俗易懂，书写方便。
缺点：不推荐使用，需要计算准确地值，且容易出现偏差。