html - "footer"div 位于 "main"body div 下 我如何设置 css 代码？

Question

我在 3 行中有 3 个 div，1-header div2-主体部分3 英尺跳水

我的问题是“footer”div 在“main”body div 下我如何设置 css 代码？!

HTML

<div id="body">
    <div id="head-img">header</div>
    <div id="menu"></div>
    <div id="main-body">
        <div id="main-body-left">
            <div id="main-body-left-top">
                <img src="img/pic.jpg" width="641" height="456" />
            </div>
            <div id="main-body-left-bottom">
                <div id="left-lin-box">1</div>
                <div id="middle">2</div>
                <div id="right-news-box">3</div>
            </div>
        </div>
        <div id="main-body-right">Right</div>
    </div>
    <div id="footer">foooooooooooooter</div>
</div>

CSS

#main-body {
    width:905px;
    background-color:#f8f7f3;
    clear:both;
}
#main-body-left {
    float: left;
    width: 75%;
    margin: 1px 2px;
    display: inline;
    border:#900 1px solid
}
#main-body-right {
    float: right;
    text-align: left;
    margin: 2px 10px;
    display: inline;
}
#left-lin-box {
    float:left;
    width: 30%;
}
#middle {
    float: left;
    width: 30%;
}
#right-news-box {
    float: left;
    width: 40%;
}
#footer {
    background-color:#393939;
    height:50px;
}

Answer 1

您必须清除页脚 div 的 float 属性。查看工作演示 ->

EDIT

#footer {
    clear:both; /* <-- added this line */
    background-color:#393939;
    height:50px;
}

有关清算 float 的其他信息 link