父div内有浮动的子div，父div的宽度不会被子div撑开

for example：

<div id="div1">
	<div id="div2" style="float:left; width:200px; height:200px;"></div>
	<div id="div3" style="float:left; width:200px; height:200px;"></div>
</div>

像上面这样简单的html代码,你可能会很直接的算出,div1的宽度和高度是子div之和,但是事实却不是这样的,你会发现,div1的宽度为body的宽度,高度为0. why? 尼玛毫无人性啊,这不是父div包含了两个子div,父的宽度应该会被撑开的啊? 但是,两个子div他是float的,由于他们float了,脱离的正常的文档流,也就脱离了父div的控制,也就不能撑开父div的宽度高度,而父div的高度宽度又没有设定,所以当然他的高度为0,宽度为body的宽度. soga!  
  说到底，这就是没有清除浮动的问题
那么解决的方法有：
1、父div设置overflow与zoom 。div1加一个class 
.class { overflow: hidden; zoom:1;}            简单粗暴
这个zoom属性是ie特有的，这个属性是用来放大页面的大小的，zoom:2;就是放大2倍，但由于其他浏览器不支持，所以这个属性更多的是用作来清除浮动。


2、添加一个子div，用它来清除浮动
<div id="div3" class="clear:both;"></div>          简单粗暴
这样会多添加一个无意义的div标签，对于有时候遍历文档树的时候不好。


3、把父div也变成float，不过这样要设置父div的宽度，否则两个子div就会变成上下排列，即父div宽度为200px，高度400px。


4、著名的clearfix方法   在父div添加一个clearfix类
对于这个有个很好的文章 http://www.cnblogs.com/zllwebjs/archive/2010/03/19/1689980.html 。




---------------EOF-----------------