css网页设计中float浮动导致父元素未设置高度时无法闭合的解决方法

在网页设计CSS布局调整时遇到的现象：

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

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

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

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

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

 引用内容

       In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

　　目前用来清除“闭合(清除)浮动”的方法，主要是一下四种： 

　　1. 额外标签法 

　　这种方法就是向父容器的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签。 

　　＜div style="clear:both;">＜/div> 

　　或者使用 

　　＜br style="clear:both;" /> 

　　2. 使用after伪类 

　　这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容。 

　　这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。 

　　#outer:after{ 
　　 content:"."; 
　　 height:0; 
　　 visibility:hidden;
　　 display:block; 
　　 clear:both; 
　　} 

　　3.设置overflow为hidden或者auto 

　　这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素. 

　　不过使用overflow的时候，可能会对页面表现带来影响，而且这种影响是不确定的，你最好是能在多个浏览器上测试你的页面
使用这句：
 

 引用内容

overflow:auto; zoom:1;

即可
overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6，也可以用height:1%;的方式来解决，即：
 

 引用内容

    overflow: auto;
    _height: 1%;

个人认为这种方法最简单，无需添加多余的代码

　　4.浮动外部元素，float-in-float 

　　这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果，但缺点也很明显——父容器未必想浮动就浮动的了，毕竟浮动是一种比较特殊的行为，有时布局不允许其浮动也很正常。