清除浮动的几种方式

怎么产生的浮动

当一个div中的子元素设置了float时，这个div的高度没有随着内容的增加而改变高度
错误效果

f6d8a17b5eb7ee4c41ee52be3a6e02fa.png

正确效果

4356b59b1d5cbf166e4f6456ea8b89b1.png

---

解决方案

方法1

在浮动元素末尾添加一个空的标签例如

其他标签br等亦可

   
1）添加额外标签
   
.main{float:left;}
   
.side{float:right;}
   

优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离。

---

方法2

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

 

    
2)父元素设置 overflow 
    
.main{float:left;}
    
.side{float:right;}
 

优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

---

方法3(推荐方法)

需要注意的是 :after是伪元素，不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { _zoom:1; }

优点：结构和语义化完全正确,代码量居中
缺点：复用方式不当会造成代码量增加