元素float以后，div高度无法自适应解决方案

首先要明白 >>  浮动的子元素会脱离文档流，不再占据父元素的空间，父元素也就没有了高度。

解决方案：1
　　给父元素加上overflow:hidden;属性就行了。

第一种：(给父级加overflow:hidden;)

<style type="text/css">
   .parent{width:100px; border：1px solid #ccc; overflow:hidden;}
   .parent li {list-style:none;float:left;width:20px;}
</style>

<div class="parent">
    <ul>
        <li> <a href="#">全部手机</a></li>
        <li> <a href="#">1080高清</a></li>
        <li> <a href="#">双卡手机</a></li>
         <li> <a href="#">拍照神器</a></li>
    </ul>
</div>

解决方案：2
　　给浮动元素后加上clear:both;属性就行了。

 //第二种：(给浮动元素后加clear:both)

 <style type="text/css">
    .parent{width:100px; border：1px solid #ccc; }
    .parent li {list-style:none;float:left;width:20px;}
 </style>

 <div class="parent">
     <ul>
         <li> <a href="#">全部手机</a></li>
         <li> <a href="#">1080高清</a></li>
         <li> <a href="#">双卡手机</a></li>
          <li> <a href="#">拍照神器</a></li>
     </ul>
     <div style="clear:both"></div>
 </div>