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

巴特西

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

最新文章

热门文章