使用Float布局容器高度出错的决办法

这个问题应该是使用标准布局发生兼容性问题的“典范”了，做网页的人几乎都遇见过，我在做页面的时候也遇见过。因为父元素内所有的子元素都浮动了，所以父元素计算不到子元素的高度;导致父元素没有获得高度，没有高度就局限了background与border的显示区域，同时也有可能出现其他莫名其妙的问题。

产生条件：父元素内所有的子元素全部浮动（其他的就不多说了）

• 解决办法一：

给父元素设高度（不推荐使用），最早我就是这么做的。早就不再用了！！

• 解决办法二：

在父元素下面（和父元素平级的位置）加一个空div（视情况选择使用），并且清除浮动，可以用，但增加了多余的垃圾代码。

• 解决办法三：

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

• 解决办法四：

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

• 解决办法五：

使用after伪类，这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素)，并隐藏这个内容。这种方法兼容性一般，但经过各种 hack 也可以应付不同浏览器了，同时又可以保证html 比较干净，所以用得还是比较多的。

.Clea:after{　/*在Clea这个元素的后边*/
　　content:"."　/*写入一个点*/
　　display:block;      /*块级布局方式*/
　　clear:both;　　/*清除左右浮动*/
　　height:0;visibility:hidden;　　/*不可见*/
}

• 解决方法六（限IE）：

父元素height:1%，（反正这个我不用，用了这个FF怎么办？after？）。

 <div style = "height:1%" >
　　 <div style = "float:left">
　　 </div>
</div> 

希望还有其他方法。。。