子元素浮动后、父元素的高度自适应

一、普通情况下，即没有任何浮动样式等的情况下

设置父元素的高度为aotu 或100% 或者不设置，那么父元素会根据子元素的高度而自动调整自身高度。

栗子

<!--html代码-->
<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
</div>

CSS样式

#wrap{
            background: pink;
}
#content{
             150px;
            height: 50px;
            background: greenyellow;
}
img{
             100px;
            height: 100px;
}

显示如下图：

二、当子元素设置浮动后，父元素的高度就不会自动适应浮动的子元素了。

比如给上述栗子的img添加一个浮动样式： float:left，显示效果如图：

所以，为了让父元素的高度能自动适应浮动的子元素，方法有很多，我常用以下3种：

1.给父元素设置overflow:hidden，同时height不设置或者100%或者auto;

效果如图，父元素wrap的高度已经包含了2个子元素：浮动的img和不浮动的绿色div：

代码：

html代码：

<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
</div>

CSS样式代码：

        #wrap{
            background: pink;           
            overflow: hidden;
        }
        #content{
             150px;
            height: 50px;
            background: greenyellow;           
        }
        img{
             100px;
            height: 100px;
            float: left;
        }

2、父级元素内中的最下面新增一个标签，设置clear:both；

效果同上，不上图了

html代码：

<div id="wrap">
    <img src="./1.png" alt="logo"/>
    <div id="content"></div>
    <div class="clear"></div>
</div>

CSS样式代码：

#wrap{
            background: pink;         
   
 }
 #content{
             150px;
            height: 50px;
            background: greenyellow;
}
img{
             100px;
            height: 100px;
            float: left;
}
.clear{
            clear: both;//重点代码
}

 3：用伪类:after（这和第二条很类似，但是我觉得比第二条好，因为伪类只产生了CSS样式，并不会影响DOM结构,其实我个人，比较推荐这种写法）

  ul:after{
    content:"";
    display: block;
    clear:both;
  }
li{
　　float:left;
}

HTML代码：

           <ul>
                <li class="img-list-li"> </li>
                <li class="img-list-li"> </li>
                <li class="img-list-li"> </li>
         </ul>