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的更多信息：

Answer 2

您所看到的是使用.clearfix伪类的:after效果。添加隐藏内容块后，.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;），并且此类用于中和这些浮点数。

神秘的'：'经过'css规则

5 个答案: