1

向左浮动元素时哪个更好？

使用通用 .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;
}

?

4

3 回答 3

1

我个人更喜欢 .clearfix，因为它拥有最多的浏览器支持——IE6&7 不支持 :after 选择器。此外，您可以在一处定义清算属性，并将类添加到您需要使用它们的任何地方。如果您继续在每个元素的基础上使用 :after，您将以大量重复的 CSS 结束。

于 2012-05-16T01:35:33.360 回答
1

也没有，真的。Internet Explorer 7 和更早的版本不支持伪元素，所以我使用的是：

.clearfix {
    clear: both;
}

和

<br class="clearfix" />

它几乎是语义化的，即使在 IE 6 中也可以工作，而且非常干净整洁。

于 2012-05-16T01:35:40.983 回答
1

使用:after，必须考虑跨浏览器问题。如果我们要为所有浏览器提供支持，包括旧的，伪元素可能不是方式：

CSS 选择器和伪选择器浏览器兼容性

与通用类 与 特定类相关

根据定义：

通用类可以应用于标记中的任何元素，最适合与所有元素都支持的通用格式化指令一起使用，或者用于需要在多种类型的元素上使用的格式化指令。

特定类通过仅应用于标记中的特定元素来达到其目的，最适合格式化仅特定于一种类型元素的指令。

使用泛型类而不是特定类的目标是：

  1. 更清洁的标记
  2. 再利用
  3. 较小的文件（浏览器内容下载性能）
  4. 易于维护或更新
于 2012-05-16T01:45:03.037 回答