Html 在何处应用clearfix类

因此，我有一个问题，就是最后一段显然没有清除并滑入

h1

和

nav

的中间。但当我把一个div与一个明确的：两个财产之前的一段，它似乎工作

请耐心听我说

• 我使用紫色背景来表示我从nettuts中学到的图像替换技术
• clearfix部分是一个名为“group”的类，CSS位于底部
• 如果我移除

  显示：块

  from

  h1>a

  布局中断，因此接下来的问题是，我应该浮动哪些元素以及应该在哪里应用clearfix

试试：

p{
   clear:both;
}

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

试试：

---

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

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

考虑一下你的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:all

规则添加到

p

清算元素必须出现在DOM中

nav

元素之后

在本例中，您将

.group

应用于

nav

，这将生成显示在

ul

块之后的内容，该块是

nav

块的子块

问题变得更明显的是，您将

nav

高度设置为

auto

，并添加一些边框和颜色以显示各个块的边缘

请参见演示：

问题如下：

---

我添加了一个

x

，以在生成的内容中标记清算元素的位置，它出现在

nav

块中。

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

考虑一下你的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:all

规则添加到

p

清算元素必须出现在DOM中

nav

元素之后

在本例中，您将

.group

应用于

nav

，这将生成显示在

ul

块之后的内容，该块是

nav

块的子块

问题变得更明显的是，您将

nav

高度设置为

auto

，并添加一些边框和颜色以显示各个块的边缘

请参见演示：

问题如下：

---

我添加了一个

x

来标记生成内容中出现在

nav

块中的清算元素的位置。

是否将

p

作为标题的一部分？还是

p

的上边缘应该在链接或

nav

组的下方？@MarcAudet是的，很抱歉我错过了。

p

仍在

标题中。基本上，我在
nav
之后还有一些其他元素，我只是用一个
p
元素来替换它们，以简化代码，同时仍然显示问题。很难理解您想要什么，你能展示你想要的图片吗？@C-Link基本上我想要的是让段落位于2个浮动元素下面。就像我应用了
clear:both到段落，但是我尝试在不清除它的情况下实现该结果，而是使用clearfix技术。是否
p
是标题的一部分？还是
p
的上边缘应该在链接或
nav
组的下方？@MarcAudet是的，很抱歉我错过了。
p
仍在
标题中。基本上，我在
nav
之后还有一些其他元素，我只是用一个
p
元素来替换它们，以简化代码，同时仍然显示问题。很难理解您想要什么，你能展示你想要的图片吗？@C-Link基本上我想要的是让段落位于2个浮动元素下面。就像我应用了
clear:both到段落中，但相反，我尝试在不清除它的情况下实现该结果，而是使用clearfix技术。是的，这与添加div和应用clear类似：两者都是，我想知道的是为什么clearfix不起作用。clearfix技术不应该通过应用clearfix类而不是在每个浮动元素之后清除所有元素，从而避免我们在每个浮动元素之后清除元素吗？@kentz clearfix允许元素在其自身之后清除。通常在所有子对象都处于浮动状态时使用，因为这会将它们从正常流中移除。在这种情况下甚至不需要它，因为它将包含最后一个
p
标记，因为它不是浮动的，并且位于所有其他浮动元素的下方。@thgaskell是的。由于我浮动了
nav
，我认为对其应用clearfix会导致段落出现在它下面，就像我使用了
clear:both在段落上，但它似乎没有效果。对不起，我实际上认为clearfix应用于标题。
清除：这两个
实际上都应用于
.group
元素后面的伪元素。您的
nav
中没有任何浮动元素，因此它什么也不做。但要明确的是，clearfix使您的元素包含通常可以弹出的浮动元素