清除浮动的几种方法

Posted 2020-09-22 Stephen666

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

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

一、浮动的子元素后加一个空的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问题，就使用第二种方法。