高度自适应的列表框

<ul>

　　<li>button1</li>

　　<li>button1</li>

　　<li>button1</li>

　　<li>button1</li>

</ul>

<style type="text/css">

　　ul{border:1px green solid;list-style:none;}

　　ul li{float:left;border:1px red solid;padding:2px 5px;margin-right:5px;}　　

</style>

效果如下图：

ul里的元素浮动后，ul的border边框的显示就会出现异常，怎么样才能让ul自适应高度？经实验，在ul里添加 overflow:hidden 即可解决

ul{border:1px green solid;list-style:none;overflow:hidden;}

如图：

 

问题解决！