Question

我无法弄清楚如何阻止#body div与#leftnav div重叠。

尝试设置页面布局。此外，如果您对我目前所拥有的任何其他建议表示赞赏！

html {
    background-color: light-grey;
}

#container {
    width: 900px;
    margin: auto;
}

#header {
    width: 900px;
    font-family: 'Emblema+One', 'arial',sans-serif; 
    font-size: 4em;  
    text-align:center;
}

a {
    color: #000;
}

a:hover {
    color: red;
}

a:visited {
    color: purple; 
}

.nav {
    width: 900px;
    border:1px solid #000;
    border-width:1px 0;
    list-style: none;
    margin:0;
    padding:0;
    text-align:center;
}

.nav li {
    display: inline;
}

.nav a {
    display: inline-block;
    padding: 0 15px;
    text-decoration:none;
}

#leftnav {
    border-left: 1px solid black; 
    border-right: 1px dotted black; 
    float: left;
    width: 140px;
    height: 400px;
}

#rightnav {
    border-left: 1px dotted black; 
    border-right: 1px solid black; 
    float: right;
    width: 140px;
    height: 400px;
}

#body {
    background-color: grey;
    border: 1px solid black;
    width: 620px; 
    height: 400px;
}

#footer {
    clear: both;
    border: 1px solid black;
    width: 900px;
    height: 100px;
}

编辑：添加了HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>Cupcakes</title>
        <link rel="stylesheet" style="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Emblema+One' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <div id="container">
        <h1 id="header">Cupcakes</h1>
            <ul class="nav">
                <li><a href="www.cupcakes.com">Home</a></li>
                <li><a href="www.cupcakes.com/about">About</a></li>
                <li><a href="www.cupcakes.com/creations">Creations</a></li>
                <li><a href="www.cupcakes.com/contact">Contact</a></li>
            </ul>
        <div id="leftnav"></div>
        <div id="rightnav"></div>
        <div id="body"></div>
        <div id="footer"></div>
        </div>
    </body>
</html>

Answer 1

正如我在评论中所说，Floats and Clear property存在问题，你需要在#body中清除需要清除浮动的元素：

#body {
  clear:both;
}

检查Demo

修改

当我看到你的代码越来越近时我的错误我发现你正试图在浮动元素之间获得#body。如果你想继续这样工作，你可以：

指定margin-left等于左侧导航栏的高度：

#body { margin-left:140px; }

结束于此http://jsfiddle.net/tbHF9/1/

或者您可以让#body将width:100%空间与#body { width:100%; }内容区分开来，这将占用浮动元素的空间：

{{1}}

它以http://jsfiddle.net/tbHF9/2/

结尾

Answer 2

你没有正确清理浮子。我强烈建议您查看这篇文章http://css-tricks.com/snippets/css/clear-fix/。使用本文中的CSS，使用'clearfix'或'group'类将浮动元素包装在div中。

为什么我的Div重叠？

2 个答案: