Question

好标题不言自明，

我希望页面底部有一个页脚，但它会出现在内容后面。

你可以在这里看到问题：http://inelmo.com（我将页脚设为黑色以便你可以看到它）

HTML

<body>
<div id="header"></div>
   <div id="wrapper">
      <div id="content"> !There is php stuff echoed here! </div>
      <div id="sidebar"></div>
      <div id="footer"></div>
   </div>
</body>

CSS

#wrapper {
    width: 902px;
    margin: 70px auto 0 auto;
}

#content {
    width: 520px;
    padding: 15px;
    float: left;
}

#footer {
    background: #000;
    height: 200px;
}

/* Sidebar */
#sidebar {
    width: 336px;
    float: right;
    padding: 16px 0 0 0;
}

Answer 1

将clear: both;添加到页脚的样式定义

#footer {
    background: #000;
    height: 200px;
    clear: both;
}

Answer 2

clear属性禁用浮动。

Reference - CSS clear

页脚显示在内容后面而不是页面底部

2 个答案: