.clearfix类vs :after

Question

当元素从左到右浮动时，哪个更好？

使用泛型.clearfix类：

.clearfix:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

您可以重用它并将其应用于容器元素：

   <div class="some-section clearfix">
     <div class="align-left"> left </div>
     <div class="align-right"> right </div>
   </div>

   <div class="some-other-section clearfix">
     <div class="align-right"> right </div>
   </div>

或特定的结算规则，如：

.some-section:after, some-other-section:after{
  content:".";
  display:block;
  clear:both;
  visibility:hidden;
  line-height:0;
  height:0;
}

Answer 1

我个人更喜欢.clearfix，因为它有最多的浏览器支持-- IE6&7不支持:after选择器。此外，您可以在一个位置定义清除属性，并将类添加到需要使用它们的任何位置。如果你在每个元素的基础上继续使用:after，你最终会得到很多重复的CSS。

Answer 2

都不是，真的。Internet Explorer7和更早的版本不支持伪元素，所以我使用的是：

.clearfix {
    clear: both;
}

和

<br class="clearfix" />

它几乎是语义化的，甚至可以在IE6中工作，而且非常漂亮和干净。