html – 溢出：隐藏为ul标签做什么？

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

简而言之,它表示要按照以下方式做一些事情：

HTML：

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS：

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

它的工作非常精彩,但我对溢出感到难以置信：隐藏的CSS声明.

没有它,我的外部div就像这样崩溃：

http://jsfiddle.net/alininja/KQ9Nm/1/

当它包含在内时,外部div的行为与我希望的完全一样：

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道为什么溢出：隐藏是触发这种行为.我希望它能切断内部的li项而不是强迫外部div扩展到必要的高度.

谢谢你的期待！