元素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;属性就行了。

 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>

 

转载于:https://www.cnblogs.com/lc23/p/5434032.html