伟大的塌陷

在设计网页布局时，有一个很蛋疼的问题，那就是使用浮动（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。