CSS：浮动元素在包含元素上的高度为零

Question

我对将float应用于li元素似乎意味着包含ul元素没有高度的事实感到困惑。 您可以看到此jsFiddle中演示的问题。

基本上，我想用任意数量的li元素创建一个ul 。 我希望每个li元素的宽度为20％，所以最终每行有五个li元素。

我还希望ul元素具有一定的高度，因此我可以应用底部边框。

如果我在li上使用此类：

.result1 { 
  width: 20%;
  float: left;
}

则ul的高度为0。我看过一些推荐display: inline-block文章display: inline-block ，但是如果我改用以下形式：

.result2 { 
  width: 20%;
  display: inline-block;
}

则ul具有高度，但是li s之间有空白，因此它们跨越了两行。

这一定是我无法理解的CSS规范中的内容。 如何获得每行五个元素，且包含元素的高度？

Answer 1

添加overflow: hidden; 到父<ul class="results">

Answer 2

浮动元素导致父元素折叠，您需要清除父元素。

.results:after {
  content: "";
  display: table;
  clear: both;
}