div.collapse{
width:100px;
height:100px;
padding:5px;
/*margin:10px;*/
background-color:lightblue;
border:1px solid #a9a9a9;
}
<div id="wrapper" style="background:pink;">
<div class="collapse" style="float:left;">content
</div>
<div class="collapse" style="float:left;">
</div>
<div style="clear:both"></div>
</div>假如不包含 <div style="clear:both"></div>这段代码,那么外层的wrapper是不会包括
里面的两个的浮动DIV的。
方法二：为父元素设置overflow属性，值为auto或hidden;
方法三：为父元素添加以下CSS规则：
#wrapper:after{
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
方法四：父元素本身设置为float（这会影响它周边的元素）
原因：float元素是脱离了页面的正常布局，定义了float以后，它将不再占用原有的位置。
因此，如果上面的第二个div不设置float，第二个div将占据第一个div的位置，从而被第一个div遮盖住了。
float带来的问题还有:
1.如果div的设置了宽度，而内容超出它的范围的话，内容就会溢出，但并不会影响到周围元素的布局。
2.对于IE6，上面第一个DIV距离左边界会是20px，原因是DIV1与DIV2都在同一个方向设置了float属性(left)，因此
存在double margin bug.解决方法是对第一个div设置 display:inline规则。
更详细的了解：http://css-tricks.com/all-about-floats/