神秘的'：经过'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的优点是，它不需要额外的标记。