在定义的css中div元素如果为float，则元素自适应高度无效。
只要清除浮动或设置overflow即可。
当几个并列div元素使用float属性时，由于父容器没有定义实际高度(height)，在IE中显示出现问题，无法显示父容器的背景颜色或背景图片。
1、
不正常显示的设置
子容器：使用float
父容器：不定义height
2、
在测试中发现，父容器在不定义高度时，取消float属性，背景颜色显示正常
子容器：不使用float
父容器：不定义height
3、
而给父容器定义了高度后，子容器再使用float则一切正常
子容器：使用float
父容器：定义height
原因及解决方法
如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。
外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释
解决方法：
给父元素设置高度
让父元素也浮动
在子级div后面加上<div style="clear:both;"></div>，即清除浮动。可以用，但增加了多余的垃圾代码。
注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。
4.设置父元素overflow为hidden或者auto（视情况选择使用），这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素，不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的.
html代码：
css样式代码：
可以看到，这里有一个宽度为800像素，背景色为蓝色的顶级元素，它有两个子元素，分别漂浮在左右两边，子元素的高左边的为50像素，右边的为60像素，为了方便查看，这里把左边的子元素背景色设置为红色。
使用火狐或其他现代浏览器打开这个网页，效果如图：
只有左浮的子元素可见，父元素不见了，因为它的子元素都浮动的，不会对父元素产生任何影响，而它内部除了两个浮动的子元素以外什么都没有，因此高度默认为0。现在尝试使用IE8以下版本打开这个网页（IE8已经修正这个问题），效果如图：
父元素被子元素撑大了，高度为60px。当初困扰我非常久的，就是我想要IE中的那个效果，可是W3C为float的定义让父元素大小不会受到任何影响，那怎么办？
其中一个解决方案就是父元素使用固定的高度，如果子元素的大小不确定，怎么解决？
在父元素的CSS中加入两句代码：
火狐中即可根据子元素的大小自动适应。