伟大的塌陷

在设计网页布局时，有一个很蛋疼的问题，那就是使用浮动（float）时的父容器塌陷问题。
先说一下什么是塌陷：
塌陷：父元素只包含浮动元素，那么它的高度就会塌缩为零（前提就是你们没有设置高度（height）属性，或者设置了为auto。就会出现这种情 况，当然不是所用的浏览器都是这样的，在IE8下面没有这种情况。）如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问 题。
先看看代码

Css代码  

1. .body{  
2.         width:900px;      
3.         background-color:#556677;   
4.         margin:0 auto;   //为了居中  
5.         height:auto;  
6.         }  
7.         .test{  
8.         border: 5px solid #126121;  
9.         float: left;  
10.         height: 200px;  
11.         margin-left: 18px;  
12.         margin-top: 40px;  
13.         width: 150px;  
14.         }  

Html代码
              

Html代码  

1. <div class="body">  
2.         <div class="test">111</div>       
3.         <div class="test ">222</div>      
4.         <div class=" test ">333</div>  
5.         <div class=" test ">444</div>  
6.         <div class=" test ">555</div>  
7.     </div>  

这样的话，在fireFox、chrome下是没有body的#556677颜色。并不是没有上色。你查看body元素的盒型图会发现，他的高度为0。这就是塌陷。
解决办法：
1、在<div class=" test ">555</div>之后加一个<div style="clear:both"></div>，加的这个不影响整个布局。
2、在body元素的属性中加上overflow:hidden。