神秘的'：'經過'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”可以說是一個更具語義性的類名，如果不太容易識別的話。

這是一種“清除/包含浮標”的技術： http ： //www.ejeliot.com/blog/59

有關clearfix的更多信息：

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

Answer 2

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

Answer 3

我可能會弄錯，但它看起來像.group:after被用作.clearfix 。 雖然它可能看起來不是很多，但它允許頁面正確呈現，所以你應該把它留在原處。

Answer 4

:after是一個偽類，允許您在selctor之后插入內容。 在這種情況下，它添加了一個明確的修復，以正確清除.group可能已浮動內容。 這可能導致容器不擴展以包含所有內容。 這是一個粗略的等價物

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

優點:after是它不需要額外的標記。

Answer 5

事實還有一個clear: both; 屬性定義意味着常用浮點數（例如float: right;或float: left; ），並且此類用於中和這些float: left; 。