清除浮动的几种方法

css清除浮动方法小结

1）添加额外标签
这是在学校老师就告诉我们的 一种方法，通过在浮动元素末尾添加一个空的标签例如

，其他标签br等亦可。


优点：通俗易懂，容易掌握
缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的.

2)父元素设置 overflow：hidden

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


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

3）父元素也设置浮动

优点：不存在结构和语义化问题，代码量极少

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

4）使用:after 伪元素

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”）.

或者

补充：
1- .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
2- .clearfix { *zoom:1; }