html - 神秘的 ':after' css规则

Question

我最近接手了一个大型网络元素。在开始这项工作之前，我主要从事应用程序方面的工作，因此有些技术对我来说是全新的。

CSS 具有以下类:

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

整个网站上的很多东西都将组作为它们的类之一。据我所知，这是 css 中唯一引用它的部分。

我尝试在某些地方取消小组类(class)，因为它似乎并没有起到多大作用。然而，这会导致各种奇怪的事情出错——例如，一个元素的颜色似乎会延伸到下一个元素。我不明白为什么在元素末尾添加一个句点会阻止这种情况。

谁能启发我一下？

编辑:这是使用组类的地方之一。如果我删除它，使 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”可以说是一个更语义化的类名，如果不太容易识别的话。

这是一种“清除/包含 float ”的技术: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/