包含浮动元素时的高度问题

Question

我有一个列表：

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
</ul>

所有的 <li> 标签都是浮动的。我需要获取 <ul> 容器的高度。如果我没记错，下面的写法是无效的：

<ul>
 <li>Number 1</li>
 <li>Number 2</li>
 <li>Number 3</li>
 ...
 <hr class="clear" />
</ul>

.clear {
   clear: both;
}

我该怎么做？列表中的项数可能不同，因此我无法使用固定的高度。

- tsusanka

---

当你让包含元素中的所有元素都浮动时，包含元素的高度会塌陷，不会"环绕"浮动元素。有多种方法可以解决这个问题。在包含元素中添加overflow: auto可以解决问题。在底部添加额外的元素也可以解决问题。 - Jawad

Answer 1

包含浮动的好方法：

• 在 ul 中添加 overflow: hidden。
• 使用 clearfix。

- thirtydot

---

谢谢您提供的链接，我无论如何都会通过谷歌搜索的。谢谢和感谢！ - tsusanka

谢谢你的回答。我不明白为什么这样做是有道理的逻辑。人们会认为 overflow: hidden 会产生相反的效果。 - Nate Flink

还有，为什么包含元素没有环绕浮动元素？那么为什么ul不会环绕浮动的li元素呢？ - user590849

clearfix就足够了...不知道为什么有人会在这种情况下将overflow:hidden添加到ul中，哈哈^^ - faebster

@user590849 在https://dev59.com/zXA75IYBdhLWcg3wPmd8上的问题中，CSS overflow:hidden如何起作用以强制一个包含浮动元素的元素。 - CodeFarmer

Answer 2

这不是直接回答您问题的答案，但作为一个替代方案，您能否考虑使用display:inline-block？现在我只在必要时使用float，因为大多数情况下，它可以实现相同的目标，而不必完全麻烦地使容器正确包含内部浮动元素并且一直需要clear它们。

- Trevor

---

inline-block是一个有效的选项，但它有自己的（可解决的）缺点，比如受HTML中空格的影响，并且在不进行调整的情况下无法在IE7中工作。 - thirtydot

啊，明白了。我必须承认，我有一种奢侈的条件可以忽略像IE7这样的旧浏览器，因为我的工作是比较专业化的，最终用户使用的浏览器是已知和可控的。无论如何，还是值得一提的。 - Trevor

Answer 3

测试一下：

ul { overflow: hidden; }
li { float:right; display:block; }

将类添加到您的元素中，不要为所有元素执行此操作。

- Ali U

Answer 4

在这里，我将介绍一种处理这种情况的最简单方法。

如果我们有替代方案，那么左浮动始终会产生一些反应并且不好使用。

替代方案是：

li { display:inline-block; }

无需添加额外的代码，如float:left和overflow:hidden :)

- Husen