清除浮动的几种方法

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; }