在哪里应用 clearfix 类答案

【问题标题】：Where to apply the clearfix class在哪里应用 clearfix 类
【发布时间】：2013-11-27 09:53:01
【问题描述】：

所以我在最后一段显然没有清除并滑入h1 和nav 的中间时遇到了问题。但是当我在段落之前放置一个带有 clear:both 属性的 div 时，它似乎可以工作。

请忍受我的fiddle。

我使用紫色背景来表示我从 nettuts 学到的图像替换技术。
clearfix 部分是一个名为“group”的类，CSS 位于底部。
此外，如果我从 h1 > a 中删除 display:block;，布局会中断，因此后续问题是，我应该浮动哪些元素以及应该在哪里应用 clearfix。

【问题讨论】：

p 是否是标题的一部分？还是应该p 的顶部边缘位于链接或nav 组的下方？
@MarcAudet 是的，很抱歉我错过了。 p 仍在 header 内。基本上我在nav 之后还有一些其他元素，我只是将它们全部替换为单个p 元素以简化代码，同时仍然显示问题。
很难理解你想要什么，你能把图片展示成你想要的样子吗？
@C-Link 基本上我想要的是让段落位于 2 个浮动元素下方。就像我在段落中应用clear:both; 一样，但我试图在不清除它的情况下完成该结果，而是使用 clearfix 技术。

标签： html css clearfix

【解决方案1】：

您看到的问题是因为清除元素位于错误的位置。

考虑你的 CSS：

h1 {
    margin: 0;
    float: left;
    background: red;
    text-indent: -9999px;
    border: 1px dashed cyan;
}
nav {
    height: 44px;
    margin: 0;
    float: right;
    background: black;
    border: 1px dashed cyan;
}
.group:after {
    content:"x";
    display:table;
    clear:both;
    background-color: cyan;
}

h1 向左浮动，nav 向右浮动，然后您的 p 块与您的文本（未浮动）。

p 内容按预期环绕两个浮动元素，除非您将 clear:both 规则添加到 p，如前所述。

clearing 元素必须出现在 DOM 中nav 元素之后。

在此示例中，您将.group 应用于nav，这会生成出现在ul 块之后的内容，该块是nav 块的子块。

问题变得更加明显，您将nav 的高度设置为auto，并添加一些边框和颜色来显示各个块的边缘。

查看演示：http://jsfiddle.net/audetwebdesign/9nGQy/

问题可以看成如下：

我添加了一个x 来标记您生成的内容中的清除元素的位置，该元素出现在nav 块中。

【讨论】：

哦，现在我很困惑为什么 x (:after content) 会出现在 nav; 中。它不应该出现在它之后吗？我想象它在nav 和p 之间。从现在开始，我意识到我正在漂浮并清除错误的东西。为了达到预期的效果，我应该在哪里浮动和清除？
伪元素选择器:after 和:before 生成插入到应用伪元素选择器的元素内的内容。 clear: both 需要应用于您的示例中的 p 元素。
所以你的意思是：:before 部分实际上是在开始 <nav> 标记之后，:after 在结束标记之前 (</nav>)？
我不知道我在哪里读到了这些伪元素，但他们解释说内容是在元素之前和之后生成的。我觉得好受骗。无论如何，既然我知道我一直在做错事，我想我不能再问了。谢谢！

【解决方案2】：

试试：

p{
   clear:both;
}

它应该对你有用，这取决于你所追求的结果。

【讨论】：

嗯，是的，这类似于添加 div 并对其应用 clear:both，我想知道的是为什么 clearfix 不起作用。 clearfix 技术难道不是应该让我们不必通过应用 clearfix 类来清除每个浮动元素之后的元素，而不是在每个浮动元素之后清除所有元素吗？
@kentz clearfix 允许元素在自身之后清除。通常在所有孩子都漂浮时使用它，因为这会将它们从正常流程中移除。在这种情况下实际上甚至没有必要，因为它将包含最后一个 p 标记，因为它没有浮动并且位于所有其他浮动元素的下方。
@thgaskell 是的。由于我浮动了nav，我认为对它应用clearfix会导致段落出现在它的下方，就好像我在段落上使用了clear:both;一样，但它似乎没有任何效果。
对不起，我实际上认为 clearfix 已应用于标题。 clear: both 实际上应用于.group 元素之后的伪元素。 nav 中没有任何浮动元素，所以它什么也没做。但需要明确的是，clearfix 使您的元素包含浮动元素，这些浮动元素通常可以从其中弹出，因为它们已从流中删除。