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 。

注意：

原理未知，如有知道的麻煩留言告知，謝謝！