資訊專欄INFORMATION COLUMN
摘要：而不會因為高度塌陷而被隱藏在內部浮動的子元素下。若果不考慮的高度塌陷問題，直接在其弟元素處設置屬性即可。開始我誤認為了是將中的內容插入至被選元素的弟元素位置上。中的示例從這個示例可以看出，偽類內容的默認方式應該為內聯。
1. 引子
前段時間學習 web 布局的時候，因為要用浮動 float 屬性，所以就順理成章地碰到了清除浮動 clear 屬性。教學的案例中是用新建一個空的 div 標簽的方式來清除浮動的，主要代碼如下：
html
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
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;
}
2. 關于 after 的思考P.S.
1. 現在回過頭來看上述方法，其實上述方法所謂的清除浮動，都是將沒有設置高度的.mainBox的高度撐起來，從而使得.mainBox的弟元素能直接跟在.mainBox后面。而不會因為.mainBox高度塌陷而被隱藏在.mainBox內部浮動的子元素下。防止高度塌陷還可以使用創建一個 BFC 的方法（如overflow:hidden）來進行。
2. 如果.mainBox設置了高度，且大于或等于其浮動的子元素，那么不用這樣的清除浮動的方式，.mainBox的弟元素也不會受到.mainBox內部浮動子元素的影響。
3. 若果不考慮.mainBox的高度塌陷問題，直接在其弟元素處設置clear屬性即可。
w3school 中關于 after 偽類的介紹如下：
定義和用法
:after 選擇器在被選元素的內容后面插入內容。
請使用 content 屬性來指定要插入的內容。
比較有歧義的是這個“被選元素的內容后面”中的 后面 兩個字。開始我誤認為了是將 after 中的內容插入至被選元素的 弟元素 位置上。
css.rightBox:after{
content:"我是after";
display:block
}
會產生類似于
html我是after
這樣的效果 （當然，after 偽類實際上是不會產生一個 DOM 元素的）。
但通過引子中用 css 偽類 after 來進行清除浮動的檢驗，發現 后面 實際上應該理解為將 after 中的內容插入至被選元素的 子元素 位置上，即類似于如下效果：
html我是after
因此，才有了引子中用 mainBox:after{} 這樣的方式來實現 after 偽類清除浮動，而非 rightBox:after{}這種方式。
簡單總結下：after 偽類所產生的內容應該是在被選元素的子元素位置(而且在所有子元素的最后，簡單的幾個測試就能發現，不再贅述)，而非被選元素的弟元素位置。
3. w3school 中的示例從這個 示例 可以看出，after 偽類內容的默認 display 方式應該為內聯 inline。
其實看到這個示例才發現，after 偽類所產生的內容應該就是在被選元素的子元素位置的（汗，那還饒了那么大個圈才發現……）。示例中 p 標簽的 after 內容展現的方式已經很明確了，大家可以仔細體會下。所以說，看示例也是很重要啊。
P.S. 本人已零零碎碎學了些前端的東西，目前正在摸索中前進。水平有限，如有不對之處，還望各位多多指教。
&& 這個 markdown 編輯器實在是大愛啊！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111027.html
摘要：并且，一些偽元素可以使開發者獲取到不存在于源文檔中的內容比如常見的還可以為偽元素定制樣式。。中新增加的偽元素必須用偽類使用一個冒號例如。就本文而言，我們將把我們探討的范圍限制在和這兩個偽元素的巧用上。 作為一門前端er,你肯定熟知 a:hover ? ??a:visited.....我還記得在小本本上記著訣竅：love 與 hate 糾纏不休,大家都懂的吧。。。。 ? ?????偽類和...
作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。 下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...
摘要：偽元素被當做的樣式來進行展現，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區分偽類和偽元素，規定偽元素使用個冒號。偽元素的特點優點不占用節點，減少節點數。不僅塊級元素可以設置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS ...
閱讀 963·2021-11-24 10:42
閱讀 3474·2021-11-19 11:34
閱讀 2604·2021-09-29 09:35
閱讀 2525·2021-09-09 09:33
閱讀 640·2021-07-26 23:38
閱讀 2515·2019-08-30 10:48
閱讀 1385·2019-08-28 18:07
閱讀 421·2019-08-26 13:44
