应用clearfix类的位置

Question

所以我遇到了最后一段显然没有清除并滑入h1和nav中间的问题。但是当我把一个明确的div放在一个div：这两个属性在段落之前它似乎工作。

请耐心等待fiddle。

• 我使用紫色背景来表示我从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:both，否则p内容会按预期包装两个已浮动的元素。

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

在此示例中，您将.group应用于nav，这会生成在ul阻止nav阻止后出现的内容。

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

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

问题可以看作如下：

我添加了一个x来标记清算元素的生成内容中的点，该元素显示在nav块中。

Answer 2

尝试：

p{
   clear:both;
}

根据您的结果，它应该适合您。