清除浮动的方式总结

浮动的影响是啥：
如果父盒子没有设置高度，并且是由子盒子的内容撑开的，当子盒子设置浮动时，父盒子高度为0，且下面的元素会自动部位，造成影响。
1 在浮动没有宽高的盒子后在加一个清除浮动的div

 .father {
            width: 200px;
            border: 5px solid blue;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
}

<div class='father'>
    <div class='son'></div>
</div>
<div class='' style='clear:both'></div>
<div class='one'></div>

缺点：浮动的影响虽然清除了，但是父盒子的高度没有办法撑开，而且还增加了没有必要的标签。父盒子的高度不存在。
2 overflow清除浮动
在父元素中设置overflow：hidden

 .father {
            width: 200px;
            border: 5px solid blue;
            overflow:hidden;
        }
        .son {
            width: 100px;
            height: 100px;
            background: red;
            float: left;
}

特点：清除浮动，且把父元素的内容撑开
3 使用伪元素clearfix：after来清除浮动,给父元素添加clearfix类

.clearfix:after{
content:"";
height:0;
line-height:0;//不是必要
display:block;
visibility:hidden;
clear:both;
}
 .clearfix{
 zoom:1;  //解决IE兼容问题
}

4 双伪元素,父元素添加clearfix样式,一下两种写法均可

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

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