'clearfix' 或 'overflow: hidden' 哪个更适合多个列表？

Question

我们知道有多种方法可以清除 div。我一直更喜欢clearfix（引导程序）方法。

但是当需要像下面的代码一样清除列表元素/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;。

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

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

向“li”添加类会影响页面加载吗？

Answer 1

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

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

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

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

评论：向li添加类

向li 元素添加一个额外的类名不会因为浏览器解析页面和应用样式表所做的工作而显着减慢页面加载时间。

除非你有一个包含数千个 CSS 规则的复杂网页，否则我认为你不需要太在意浏览器的性能。

与普通 Web 开发人员更相关的是，拥有一个标记有许多类的页面会使维护变得更加困难。保持样式表井井有条是您通过经验积累起来的一项技能。