html - 在哪里应用 clearfix 类

Question

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

请忍受我的小提琴。

• 我使用紫色背景来表示我从 nettuts 学到的图像替换技术。
• clearfix 部分是一个名为“group”的类，CSS 在底部。
• 此外，如果我display:block;从h1 > a布局中断中删除，那么后续问题是，我应该浮动哪些元素以及应该在哪里应用 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的文本块（未浮动）。

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

清除元素必须出现在元素之后的DOM 中nav。

在此示例中，您应用.groupto nav，它会生成出现在作为该ul块的子块的块之后的内容nav。

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

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

问题可以看如下：

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

Answer 2

尝试：

p{
   clear:both;
}

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