淺談 CSS 中的僞類 after

1. 引子

前段時間學習 web 佈局的時候，由於要用浮動 float 屬性，因此就瓜熟蒂落地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div 標籤的方式來清除浮動的，主要代碼以下：

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

css.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;
}

看到以後，想到之前見到過有用 css 僞類 after 來進行清除浮動的方式。記不太清了，因而寫成了以下的狀況：

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

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

悲劇發生了，mainBox 中的 #CFF 顏色並無出如今 leftBox 和 rightBox 中間，說明上述的寫法有地方不對了。詢問了偉大的谷歌以後才發現，css 的 after 僞類應該寫在 mainBox 以後，即：

css.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.rightBox:after{
    content:"我是after";
    display:block
}

會產生相似於

html<div class="rightBox"></div>
<div>我是after</div>

這樣的效果 （固然，after 僞類其實是不會產生一個 DOM 元素的）。

但經過引子中用 css 僞類 after 來進行清除浮動的檢驗，發現 後面 實際上應該理解爲將 after 中的內容插入至被選元素的 子元素 位置上，即相似於以下效果：

html<div class="rightBox">
    <div>我是after</div>
</div>

所以，纔有了引子中用 mainBox:after{} 這樣的方式來實現 after 僞類清除浮動，而非 rightBox:after{}這種方式。

簡單總結下：after 僞類所產生的內容應該是在被選元素的子元素位置(並且在全部子元素的最後，簡單的幾個測試就能發現，再也不贅述)，而非被選元素的弟元素位置。

3. w3school 中的示例

從這個 示例 能夠看出，after 僞類內容的默認 display 方式應該爲內聯 inline。

其實看到這個示例才發現，after 僞類所產生的內容應該就是在被選元素的子元素位置的（汗，那還饒了那麼大個圈才發現……）。示例中 p 標籤的 after 內容展示的方式已經很明確了，你們能夠仔細體會下。因此說，看示例也是很重要啊。

---

P.S. 本人已零零碎碎學了些前端的東西，目前正在摸索中前進。水平有限，若有不對之處，還望各位多多指教。

&& 這個 markdown 編輯器實在是大愛啊！