Question

我学会了两种不同的方法来构建HTML / CSS中更清晰的元素，我想知道什么是最有效的元素。

第一个：

HTML

<div class="clear"></div>

CSS

.clear{
   clear:both;
}

第二个（有些人告诉我这是好的）：

HTML：

<div class="clear">&nbsp;</div>

CSS：

.clear{
   clear:both;
   height:0px;
   overflow:hidden;
   border:0;
}

你怎么看？

Answer 1

实际上两者都差不多。然而，它们两者的问题在于你必须引入一个额外的div，它几乎不提供任何价值 - 明智的内容。我敢肯定，这也不是最语义的方式。

您需要使用“clearfix”来执行此操作。如果你谷歌周围，有很多不同的方法来做一个clearfix。但通常它使用伪元素而不是空div。

以下是一个例子：

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

然后你只需要将“clearfix”类添加到父元素。

这个例子来自这篇文章：http://css-tricks.com/snippets/css/clear-fix/ 你可以在那里阅读更多相关内容。

Answer 2

请查看CSS Tricks上的这篇文章，详细了解不同浏览器和不同浏览器版本的clearfixing元素。

这是最新的方法：

.group:after {
  content: "";
  display: table;
  clear: both;
}