1. 引子

前段時間學習 web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div 標簽的方式來清除浮動的，主要代碼如下：

CSS Code復制內容到剪貼板

<div class="mainBox">   
    <div class="leftBox"></div>   
    <div class="rightBox"></div>   
    <div class="clear"></div>   
</div>   
  
.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:rightright;   
}   
.clear  
{   
    clear:both;   
    height:0;/*解決IE6下有高度的問題*/  
    overflow:hidden;   
}  

看到之后，想到以前見到過有用 css 偽類 after 來進行清除浮動的方式。記不太清了，于是寫成了如下的情況：

CSS Code復制內容到剪貼板

<div class="mainBox">   
    <div class="leftBox"></div>   
    <div class="rightBox"></div>   
</div>   
  
.mainBox{   
    width:960px;   
    background-color:#CFF;   
    margin:0 auto;   
    }   
.leftBox{   
    width:740px;   
    height:300px;   
    background-color:#C9F;   
    float:left;   
}   
.rightBox{   
    width:210px;   
    height:300px;   
    background-color:#FCF;