详细解读CSS中的伪类after

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;