html - 在 HTML/CSS 中构造更清晰的元素的最佳方法是什么？

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，这几乎没有提供任何值(value) - 内容明智。我敢肯定这也不是最语义化的方式。

您需要使用“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/您可以在那里阅读更多相关信息。