神祕的'：經過'css規則

Question

我最近繼承了一個大型的web項目。在開始之前，我主要一直在使用應用程序，所以一些技術對我來說是新的。

的CSS有以下類：

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

許多事情都在網站有團作爲其類之一。據我所知，這是CSS中引用它的唯一一點。

我試圖帶走一些地方的小組班，因爲它似乎沒有做太多。然而，這導致各種奇怪的事情出錯 - 例如，來自一個元素的顏色似乎會跑到下一個元素。我不明白爲什麼在元素末尾添加一段時間會阻止這一點。

有人能讓我放鬆嗎？

編輯：這是使用組類的地方之一。如果我刪除它，以便div只有類包裝器，則整個頁面都會中斷。

<div id="header">  
    <div class="wrapper group"> 
     <div class="fl"> 
      <a href="default.aspx">myHandle</a> | 
      <a href="~/features.aspx" runat="server" id="A1">features</a> | 
      <a href="~/about-businessbook.aspx" runat="server" id="A3">about</a> 
     </div> 
     <asp:Panel ID="pnlNotLoggedIn" runat="server" cssclass="fr"> 
      <a href="~/loginpro.aspx" runat="server" id="lnkHome">sign in</a> | 
      <a href="~/registerpro.aspx" runat="server" id="lnkAbout">sign up</a> 
     </asp:Panel> 
    </div> 
</div> 

Answer 1

這就是通常所說的「clearfix」 - 儘管「group」可以說是一個更多的語義類名，如果不太可識別的話。

這是一個技術 「清/包含花車」：在clearfix​​

的更多信息：

• http://www.positioniseverything.net/easyclearing.html
• http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Answer 2

，你看到的是一個.clearfix使用僞類的:after。當添加隱藏內容塊時，.group元素將包裝所有浮動內容，這允許background colors填充正確的區域。

Answer 3

我可能會誤解，但它看起來像.group:after以某種方式被用作.clearfix。雖然它看起來可能看起來不怎麼樣，但它可以讓頁面正確呈現，所以你應該把它放在原來的位置。

Answer 4

也是事實，即有限定的clear: both;屬性意味着有浮標（例如float: right;或float: left;）中共同使用，和這個類被用於中和的那些。

Answer 5

:after是一個僞類，允許您在選擇器之後插入內容。在這種情況下，它會添加一個明確的修復程序，以正確清除可能已經浮動內容的.group。這可能導致容器不能展開以包含所有內容。它的

<div class="group"> 
…content here… 
    <div style="clear:both"></div> 
</div> 

粗略相當於:after的優點是，它不需要額外的標記。