Question

有时，HTML / CSS只会让我发疯;（...希望有人可以解释这种行为，也许可以解决这个问题。

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

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

身体有一种绿色的蓝色。对于header-div，我设置了WHITE的前景。让我发疯的原因是前景色也会应用于body-div，即使它不包含在header-div中。怎么会发生这种情况？

在我的真实代码中，我甚至有一个问题，当我明确地将body-div的前景设置为BLUE时，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

你忘记了头部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>

Answer 2

您错过了头

的结束<div>

<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>

Answer 3

HTML的问题在于您错误地关闭了div代码。你不能这样关闭div's：<div/>。您必须使用<div></div>。请参阅this working Fiddle。

为什么这个样式来自祖先（不是父！）div继承？

3 个答案: