CSS：浮動元素給含有元素上的零高度

Question

我很困惑的事實是，應用float到li元素似乎意味着包含ul元素沒有高度。您可以看到顯示的問題in this jsFiddle。

基本上，我想創建一個ul與任意數量的li元素。我希望每個li元素具有20％的寬度，所以我最終每行有5個li元素。

我也想ul元素有一定的高度，所以我可以應用底部邊框。

如果我使用這個類的li S：

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

那麼ul具有0高度我見過的職位推薦display: inline-block，但如果我用這個來代替：

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

然後ul有高度，但li之間有空格，所以它們分成兩行。

這必須是CSS規範中我無法理解的東西。我如何獲得每行五個元素，包含元素的高度？

Answer 1

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

Fiddle

Answer 2

浮動元素會導致父級崩潰，您需要清除父元素。

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

http://jsfiddle.net/CuCdr/1/