<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;
}
/*父元素不設置高度，子元素是有高度的，會把父元素撐開*/ /*如果子元素設置浮動的話，就脫離了文檔流，就不會把父元素撐開了*/ /*因此，子元素設置浮動，父元素需要設置高度*/
【 微信掃一掃 】
