html - 为什么这个样式是从一个祖先(而不是父级!)div 继承来的？

Question

有时候，HTML/CSS 简直让我发疯；( ...希望有人能解释这种行为，也许还有解决方法。

请参阅下面的 HTML/CSS 或此示例 JSFiddle

所以我正在做的是有一个 header 和 body div，里面都有 float div，并使用 clear: both;所以容器 div 跨越 float 的内部 div。在我的真实代码中，我使用了一个更复杂的 clearfix 类，但问题是一样的。

主体的前景颜色为蓝色。对于 header-div，我设置了白色的前景。让我发疯的是前景色也被应用到 body-div，即使它不包含在 header-div 中。怎么会这样？

在我的真实代码中，我什至遇到一个问题，当我明确地将 body-div 的前景设置为蓝色时，header-div 中的颜色也会切换为蓝色。我无法用这个 JSFiddle 重现它，但如果我理解这个问题，我可以在这里重现这个示例代码，也许我也理解另一个问题:)

HTML:

<div>
    <div id="head">
        <div class="headleft">
             <h1>that's my header, baby</h1>
        </div>
        <div class="headright">
            <p>righty right</p>
        </div>
        <div style="clear: both" />
    </div>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>

CSS:

body {
    color: blue;
}
div#head {
    background-color: gray;
    width: 400px;
    color: white;
}
div#body {
    background-color: lightgray;
}
.headleft {
    float: left;
}
.headright {
    float: right;
}

.feature
{
    float: left;
    margin-right: 10px;
}

感谢您帮助理解这个问题!

编辑抱歉，通过编辑粘贴的代码，我弄乱了示例并删除了关闭的 DIV。我现在更正了这个问题，问题不是缺少结束 DIV。

Answer 1

您忘记了 head div 上的结束标记。 http://jsfiddle.net/UHXr6/2/

<div>
    <div id="head">
        <div class="headleft">
             <h1>that's my header, baby</h1>
        </div>
        <div class="headright">
            <p>righty right</p>
        </div>
        <div style="clear: both" /></div>
    </div>
    <div id="body">
        <div class="feature">
             <h1>feature 1</h1>
        </div>
        <div class="feature">
             <h1>feature2</h1>
        </div>
        <div style="clear: both;" />
    </div>
</div>