清除浮动代码的不同？

Question

在一个common.css中发现了3中清除浮动，
他们有什么区别吗？

.clearfix{zoom:1; overflow:hidden;}
.clear{ clear:both; font-size:0; height:0; line-height:0;overflow:hidden}
.row {zoom: 1;}
.row:after {content: "";display: table;clear: both;}

我遇到子元素有浮动的情况，都是使用这段代码。

.clearfix:after{
  content:"";
  dispaly:block;
  clear:both;
}
.clearfix{
  zoom:1;
}

还是说不同情况不同对待？

Answer 1

第二种用得比较多。
如果用overflow:hidden;很多情况下是不能用的

Answer 2

看你喜好

Answer 3

建议用第二种，第一种overflow兼容性不够好

Answer 4

clear:both 不多说
overflow:hidden 是会触发 内容格式化块 块级格式化上下文，所以内部浮动会被“清除” 让其不会影响外部元素
::after 伪元素也是用通过增加空内容display:block于用普通的clear 方法相比，个人看来似乎并没什么特殊的
zoom这个好像和ie 有关，不太清楚

Answer 5

第一种写法应该更多考虑了对IE的兼容。

Answer 6

请参考一丝的《那些年我们一起清除的浮动》

教程很详细，我就不搬运了