为什么清除浮动？
- 父级没高度
- 子盒子浮动了
- 影响下面布局了，我们就应该清除浮动了。
1. 额外标签法（隔墙法）
优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构比较差
另外要求这个新的标签必须是块级元素。
最后一个标签后面添加标签
<div style="clear:both;">
</div>
2. 父级overflow：hidden；
优点：书写简单
缺点：溢出隐藏
3. :after 方式是额外标签法的升级版，也是给父元素添加。
.clearfix:after {
content: " ";
display: block;
height: 0;
font-size: 0;
visibility: hidden;
clear: both;
}
.clearfix {/* IE6,7专有 */ 由于这个版本不支持：after 会有兼容性问题
*zoom: 1;
}
.clearfix {
*zoom:1;
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度 淘宝 网易等
4. 双伪元素清除浮动，也是给父元素添加
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
点赞加关注，永远不迷路
