伟大的塌陷（css中float属性的问题）

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

.body{
		width:900px;    
		background-color:#556677; 
		margin:0 auto;   //为了居中
		height:auto;
		}
	    .test{
		border: 5px solid #126121;
		float: left;
		height: 200px;
		margin-left: 18px;
		margin-top: 40px;
		width: 150px;
		}

Html代码
              

 <div class="body">
			<div class="test">111</div>		
			<div class="test ">222</div>	
			<div class=" test ">333</div>
			<div class=" test ">444</div>
			<div class=" test ">555</div>
		</div>

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