css float父元素自适应高度无效解决办法

当几个并列div元素使用float属性时，由于父容器没有定义实际高度(height)，在IE中显示出现问题，无法显示父容器的背景颜色或背景图片

做了如下设置实验情况：
1、
不正常显示的设置
子容器：使用float
父容器：不定义height
2、
在测试中发现，父容器在不定义高度时，取消float属性，背景颜色显示正常

子容器：不使用float
父容器：不定义height
3、
而给父容器定义了高度后，子容器再使用float则一切正常

子容器：使用float
父容器：定义height

原因及解决方法

如果您没有闭合(清除)浮动元素，它将造成的后果是-----div的高度不能自动增加。
外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释

解决方法：

给父元素设置高度
让父元素也浮动

在子级DIV后面加上

注意，多了一段清理浮动的代码。这是一种好的CSS代码习惯，但是这种方法增加了无用的元素。

4.设置父元素overflow为hidden或者auto（视情况选择使用），这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素，不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的.

下面来看个例子

我们写一个实例，让我们更直观地看这个问题是怎么产生的，首先写下以下HTML代码：
  

    可以看到，这里有一个宽度为800像素，背景色为蓝色的顶级元素，它有两个子元素，分别漂浮在左右两边，子元素的高左边的为50像素，右边的为60像素，为了方便查看，这里把左边的子元素背景色设置为红色。
    使用火狐或其他现代浏览器打开这个网页，效果如图：

    只有左浮的子元素可见，父元素不见了，因为它的子元素都浮动的，不会对父元素产生任何影响，而它内部除了两个浮动的子元素以外什么都没有，因此高度默认为0。现在尝试使用IE8以下版本打开这个网页（IE8已经修正这个问题），效果如图：

    父元素被子元素撑大了，高度为60px。当初困扰我非常久的，就是我想要IE中的那个效果，可是W3C为float的定义让父元素大小不会受到任何影响，那怎么办？其中一个解决方案就是父元素使用固定的高度，如果子元素的大小不确定，怎么办呢？当初做这个的时候上网查了一下资料，在父元素的CSS中加入两句代码：
    
    zoom: 1; 
    overflow:hidden; 
    
    那么火狐中就可以根据子元素的大小自动适应了。