子元素浮动float后，父元素高度为0无法自适应的问题解决

父元素没有设置float属性，而子元素设置了float属性，此时父元素的高度为0无法自适应子元素的高度。通过将父元素加上边框来观察效果。

html代码如下：

<div style="width:300px;margin:0px auto;border:2px solid #ccc;">

      <div style="width:300px;height:100px;float:left;">子元素区域</div>

</div>

可以看到，此时父元素的高度无法自适应子元素，高度为0px如下图所示

要解决此问题，只需给父元素加上样式属性overflow:hidden;即可，代码如下：

<div style="width:300px;margin:0px auto;border:2px solid #ccc;overflow:hidden;">

      <div style="width:300px;height:100px;float:left;">子元素区域</div>

</div>

此时即如下图所示，父元素的高度不再为0px，而是可以自适应子元素的高度了

除此之外，还有如下几个方法，也可以达到使父元素有高度的效果：
       1、给父元素加上浮动float；
       2、给父元素直接加上height属性；
       3、在子元素后清除浮动，加上代码<div style="clear:both;"></div>。