HTML之ul背景色

问题描述：
在使用ul制作下拉菜单时，效果如下，要给菜单栏（即ul）加上背景色，发现background-color没起作用。查看ul元素盒子大小，发现盒子高度为0。

HTML：

<div id="menuList">
        <ul>
            <li>学院概况</li>
            <li>学科建设</li>
            <li>教师园地</li>
            <li>学生园地</li>
        </ul>
    </div>

CSS：

body,div,ul,li{
            margin: 0;
            padding: 0;
        }
        #menuList{
            margin:20px;
        }
        ul{
            list-style: none;
            background-color: gray;
        }
        ul li{
            float: left;
            padding: 0 5px;
            border-left: solid 1px black;
        }

解决方案：
由于ul没有直接制定高度，其高度根据里面的li来伸缩。由于li设置了向左浮动，因此得清除浮动才能显示背景色。
1. 清除浮动可以给ul添加一个overflow：hidden的样式。
2. 或者在</ul>前面加入一个清除浮动的div，即

<div style="clear: both;"></div>