＆＃39; clearfix＆＃39; OR＆＃39;溢出：隐藏＆＃39;哪个更适合多个上市？

Question

我们知道有多种方法可以清除div。我总是喜欢clearfix（bootstap）方法。

但是当需要清除列表元素/ div（多个）时，如下面的代码

<ul>
     <li class="clearfix"> some floated elements goes here.. </li>
     <li class="clearfix"> some floated elements goes here.. </li>
     <li class="clearfix"> some floated elements goes here.. </li>
     .
     .
     . 
     So on
</ul>

在上面的例子中，为每个li添加一个类似乎不方便。 而不是我们可以使用overflow: hidden;。

关于这个话题还有很多意见。

任何人都可以在这里帮助哪种方法强烈推荐上述情况以及为什么它更好？

将课程添加到＆＃39; li＆＃39;会影响页面加载吗？

Answer 1

这两种方法都取得了类似的结果，但在某些情况下，一种方法可能比另一种更有利。

使用overflow: {auto|hidden}会创建一个新的块格式化上下文，这会影响父级域中包含边距和填充的方式。例如，使用新的块格式化上下文，某些边距不会像您预期的那样崩溃。

使用清除元素（在DOM中或作为伪元素），边距会按预期折叠。

除了这种区别之外，很难推荐一种方法而不是另一种方法。

评论：将类添加到li

为li元素添加其他类名称不会显着减慢页面加载时间，因为broswer会解析页面并应用样式表。

除非您有一个包含数千个CSS规则的复杂网页，否则我不认为您需要过于关注浏览器性能。

与普通Web开发人员更相关的是，拥有标记有大量类的页面会使维护变得更加困难。保持样式表的组织是一种你经验丰富的技能。