我正在使用本文中的说明创建多列列表：
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扩展到必要的高度.
谢谢你的期待！
解决方法
除非您将溢出设置为隐藏,滚动或自动,否则任何可能浮动的内部都不会被剪裁.该方法的真正神奇之处在于,在没有给元素设置高度的情况下,当你将overflow设置为hidden时,它会占用内部元素的高度.
这里div不会包围img,因为img是浮动的.
<div><img style="float:left;height:100px" /></div>
这里div将实现img的高度,现在有一个适当的溢出.
<div style="overflow:hidden"><img style="float:left;height:100px" /></div>
如果你给它一个设定的高度然后设置溢出隐藏它会切断任何本来溢出的东西.
<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>
请注意,在很多情况下,可以使用这些技术来避免明确：两种类型的额外标记.
