div高度根据内容物高度自适应的方法

示例：
HTML中：

<div class="lei">
    <p>电脑</p>
    <ul>
        <li><b>台式电脑</b></li>
        <span>3666.00</span>
    </ul>
    <ul>
         <li><b>笔记本电脑</b></li>
         <span>4888.00</span>
    </ul>
</div>

CSS中：

.lei{width: 96%; border: 1px solid #DDDDDD; margin: 0.6rem auto; border-radius: 0.3rem; color: #666666; padding-bottom: 0.6rem;}
.lei p{margin: 0.6rem 2% 0.3rem;}
.lei ul{ width: 15%; text-align: center; margin: 0.3rem 0 0 1.4%; border-radius: 0.3rem; float: left; background: white;}
.lei ul li{height: 2rem; line-height: 2rem; list-style: none;}
.lei ul span{font-size: 0.6rem; display: block; height: 3rem; line-height: 1rem; overflow: hidden; text-align: left; padding-left: 3%;}

出现问题：
.lei 的高度只包含了 p 标签的高度， ul 标签都显示在 .lei 外面。

解决办法：
给 .lei 添加了 overflow: auto 或 overflow: hidden 即可使 .lei 的高度包含 p 和 ul 。

注意：
原理未知，如有知道的麻烦留言告知，谢谢！