<ul> 包含浮动 <li> 时的高度答案

【问题标题】：<ul> height when containing floating <li><ul> 包含浮动 <li> 时的高度
【发布时间】：2011-10-08 17:46:57
【问题描述】：

我有一个清单：

<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;
}

我该怎么做？列表中的项目数可以不同，所以我不能使用固定高度。

【问题讨论】：

当您浮动“所有”包含元素中的元素时，包含元素的高度会折叠并且不会“环绕”浮动元素。解决这个问题的方法很多。将溢出：自动添加到包含元素可以解决问题。在底部添加额外的元素也解决了这个问题。

【解决方案1】：

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

向左浮动总是有一些反应，如果我们有其他选择的话，它就不好用了。

替代方案是：

li { display:inline-block; }

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

【讨论】：

【解决方案2】：

测试一下：

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

为你的元素添加类，不要对所有元素都这样做。

【讨论】：

【解决方案3】：

包含浮动的好选择：

【讨论】：

【解决方案4】：

这不是您问题的直接答案，但作为替代方案，您是否可以考虑使用display:inline-block？这些天我只是在可能的情况下使用它而不是float，因为基本上大多数时候它可以实现相同的目标，而无需让容器正确包含内部浮动元素并且不得不一直clear它们.

【讨论】：