div height depending upon the contents of the highly adaptive method

Example:
the HTML in which:

<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>

The 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%;}

Problem:
.lei height contains only highly label p, ul labels are displayed on the outside .lei.

The solution:
to .lei add overflow: auto or overflow: hidden to the height .lei contains p and ul.

Note: The
principle is unknown if any know the trouble to inform the message, thank you!