首先要明白 >> 浮动的子元素会脱离文档流，不再占据父元素的空间，父元素也就没有了高度。
解决方案：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;属性就行了。
1 //第二种：(给浮动元素后加clear:both)
2
3 <style type="text/css">
4 .parent{width:100px; border：1px solid #ccc; }
5 .parent li {list-style:none;float:left;width:20px;}
6 </style>
7
8
9 <div class="parent">
10 <ul>
11 <li> <a href="#">全部手机</a></li>
12 <li> <a href="#">1080高清</a></li>
13 <li> <a href="#">双卡手机</a></li>
14 <li> <a href="#">拍照神器</a></li>
15 </ul>
16 <div style="clear:both"></div>
17 </div>