子div設置浮動無法把父div撐開。

<div class="mainBox">
　　<div class="leftBox"></div>
    <div class="rightBox"></div>
    <div class="clear"></div>
</div>

註意：leftBox和rightBox設置浮動之後脫離了普通的文檔流，不再占用原來文檔中的位置，因此無法把父div撐開。

解決的方法：

①可以給父div也設置高度為300px，使頁面中的leftBox和rightBox看起來“好像”還在原來的位置；
②定義一個類選擇器，並設置clear:both；清除浮動，同時為瞭解決IE6中div有高度的問題可以增加屬性height:0;overflow:hidden;

.mainBox
{
	width:960px;
	margin:0 auto;
	background-color:#CFF;
	overflow:visible;
}
.leftBox
{
	width:740px;
	height:300px;
	background-color:#C9F;
	float:left;
}
.rightBox
{
	width:210px;
	height:300px;
	background-color:#FCF;
	float:right;
}
.clear
{
	clear:both;
	height:0;/*解決IE6下有高度的問題*/
	overflow:hidden;
}

/*父元素不設置高度，子元素是有高度的，會把父元素撐開*/

/*如果子元素設置浮動的話，就脫離了文檔流，就不會把父元素撐開了*/

/*因此，子元素設置浮動，父元素需要設置高度*/