清除浮动的方法以及优缺点

为什么要清除浮动？

清除浮动是为了解决，父元素因为子级元素浮动而引起的内部高度为零的问题。

清除浮动的几种方式

1、额外标签法

使用方法：在浮动元素末尾添加一个空标签。

<div style="clear:both"></div>

虽然书写简单，但是额外增加了代码量

2、父级元素添加overflow属性

overflow:hidden;

• hidden会隐藏溢出部分内容
• scroll：内容溢出时会产生滚动条
• auto：不管内容有没有溢出都要添加滚动条

3、after伪元素清除浮动

.clearfix:after{ 
           content:'';
           display:block;
           height:0;
           clear:both;
           visibility:hidden;
           .clearfix {*zoom:1;} /*浏览器兼容*/

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

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