CSS中的偽類after是怎樣的

這篇文章將為大家詳細講解有關CSS中的偽類after是怎樣的，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

1. 引子

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

CSS 

1. <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 

1. <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;   
       float:rightright;   
   }   
   .rightBox:after{   
       clear:both;   
       content:".";   
       visibility:hidden;   
       display:block;   
       height:0;   
       overflow:hidden;   
   }

悲劇發生了，mainBox 中的 #CFF 顏色并沒有出現在 leftBox 和 rightBox 中間，說明上述的寫法有地方不對了。詢問了偉大的谷歌之后才發現，css 的 after 偽類應該寫在 mainBox 之后，即：

CSS 

1. .mainBox:after{   
       clear:both;   
       content:".";   
       visibility:hidden;   
       display:block;   
       height:0;   
       overflow:hidden;   
   }

    P.S.
    1. 現在回過頭來看上述方法，其實上述方法所謂的清除浮動，都是將沒有設置高度的.mainBox的高度撐起來，從而使得.mainBox的弟元素能直接跟在.mainBox后面。而不會因為.mainBox高度塌陷而被隱藏在.mainBox內部浮動的子元素下。防止高度塌陷還可以使用創建一個 BFC 的方法（如overflow:hidden）來進行。
    2. 如果.mainBox設置了高度，且大于或等于其浮動的子元素，那么不用這樣的清除浮動的方式，.mainBox的弟元素也不會受到.mainBox內部浮動子元素的影響。
    3. 若果不考慮.mainBox的高度塌陷問題，直接在其弟元素處設置clear屬性即可。

2. 關于 after 的思考

w3school 中關于 after 偽類的介紹如下：

    定義和用法
    :after 選擇器在被選元素的內容后面插入內容。
    請使用 content 屬性來指定要插入的內容。

比較有歧義的是這個“被選元素的內容后面”中的 后面 兩個字。開始我誤認為了是將 after 中的內容插入至被選元素的 弟元素 位置上。

CSS 

1. .rightBox:after{   

2.     content:"我是after";   

3.     display:block  

4. }  

會產生類似于

CSS 

1. <div class="rightBox"></div>   

2. <div>我是after</div>  

這樣的效果 （當然，after 偽類實際上是不會產生一個 DOM 元素的）。

但通過引子中用 css 偽類 after 來進行清除浮動的檢驗，發現 后面 實際上應該理解為將 after 中的內容插入至被選元素的 子元素 位置上，即類似于如下效果：

CSS 

1. <div class="rightBox">   

2.     <div>我是after</div>   

3. </div>  

因此，才有了引子中用 mainBox:after{} 這樣的方式來實現 after 偽類清除浮動，而非 rightBox:after{}這種方式。

簡單總結下：after 偽類所產生的內容應該是在被選元素的子元素位置(而且在所有子元素的最后，簡單的幾個測試就能發現，不再贅述)，而非被選元素的弟元素位置。
3. w3school 中的示例

從這個 示例 可以看出，after 偽類內容的默認 display 方式應該為內聯 inline。

其實看到這個示例才發現，after 偽類所產生的內容應該就是在被選元素的子元素位置的（汗，那還饒了那么大個圈才發現&hellip;&hellip;）。示例中 p 標簽的 after 內容展現的方式已經很明確了，大家可以仔細體會下。所以說，看示例也是很重要啊。

關于CSS中的偽類after是怎樣的就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。