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

最新推荐文章于 2021-08-03 21:37:51 发布

weixin_30606669

最新推荐文章于 2021-08-03 21:37:51 发布

阅读量294

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lc23/p/5434032.html

本文介绍了两种解决浮动元素导致的父元素高度塌陷的方法：一是通过设置父元素的overflow属性为hidden；二是通过在浮动元素后添加一个clear:both的空元素来清除浮动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

解决方案：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>