首页 > 代码库 > 清除浮动的几种方法

清除浮动的几种方法

“清除浮动”这个说法容易让人产生误解,我认为这个说法的本意应该是“清除浮动带来的负面效果”,这个负面效果即“子元素的浮动会脱离标准文档流,从而造成父元素的高度塌陷”。

解决这个问题有如下几个目前流行的做法。

一、浮动的子元素后加一个空的div,并加上clear:both属性;

二、BFC方法

      (1)父元素加上overflow:hidden,该方法会带来IE6的兼容性问题,并且也限制了父元素的本身的overflow语义;

      (2)针对IE6,父元素加上zoom:1属性;

三、父元素加上after伪元素,IE6和7不兼容:

1 .parent:after{
2     content:"";
3     display:table; /* 或者block */
4     clear:both;
5 }

总结:推荐使用第三种方法,如果要考虑IE的6和7问题,就使用第二种方法。

清除浮动的几种方法