html - 在哪里应用 clearfix 类

Question

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

忍受我的fiddle ，请。

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

Answer 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 block 包含您的文本(未 float )。

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

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

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

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

参见演示:http://jsfiddle.net/audetwebdesign/9nGQy/

问题可以看如下:

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