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

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

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

栗子

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

CSS样式

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

显示如下图：

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

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

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

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{
            width: 150px;
            height: 50px;
            background: greenyellow;
        }
        img{
            width: 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{
            width: 150px;
            height: 50px;
            background: greenyellow;
}
img{
            width: 100px;
            height: 100px;
            float: left;
}
.clear{
            clear: both;//重点代码
}