Question

查看jsfiddle中的代码： http://jsfiddle.net/UrBFR/

HTML：

<div id="main">
        <div id="header">
        </div>
        <div id="menupane">
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
            <a href="#" class="buttons">Test</a>
        </div>
        <div id="body">
        </div>
        <div id="footer">
        Hello
        </div>
    </div>

CSS：

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    background-color: red;
    height: 35em;
}

请注意，页脚的高度为35em。我想要高度为3em，但如果我这样做，那么它就不会显示出来。基本上，正在发生的是，页脚div低于所有其他div，并且只有当我给出一个比所有其他div更大的高度时才能看到页脚。这从未发生过。任何人都可以告诉我为什么会这样，以及如何解决这个问题？

Answer 1

我分叉你的jsfiddle来提供答案：

http://jsfiddle.net/nickadeemus2002/SCuvR/

的CSS：

#main
{
    width: 60em;
    height: 36em;
    margin: auto;
}

#header
{
    background-color: #00c0ff;
    height: 5em;
}

#menupane
{
    background-color: green;
    width: 10em;
    height: 28em;
    float: left;
}

.buttons
{
    color: #1f3568;
    text-decoration: none;
    font-family: courier new;
    color: #000000;
    margin-right: 0px;
    line-height: 40px;
    text-align: center;
    display: block;
}

.buttons:hover
{
    background-color: #ff9600;
}

#body
{
    background-color: yellow;
    float: right;
    height: 28em;
    width: 50em;
}

#footer
{
    **clear:both;**
    background-color: red;
    height: 3em;
}

注意#footer CSS规则。我添加了“clear：both”，因为你在“#menupane”中实现了“float”。您需要清除浮动行为，以便按预期显示其他元素。

您可以在此处找到关于“清除”的更多内容：

http://www.w3schools.com/cssref/pr_class_clear.asp

清除“both”表示左侧或右侧不会出现浮动元素。

为什么<div>重叠？</div>

1 个答案: