我的<footer>一直跳到页面顶部</footer>

Question

您好我正在使用Aptana Studio 3撰写网站我现阶段有1 <div>个内容，一个<nav>用于网站导航，一个<footer>包含简单版权。  我目前正在尝试

float:left;
float:right;

这导致我的<footer>跳转到页面顶部并且它不会离开，请帮我找到一个不涉及position:absolute;的解决方案或者没有找到方法要居中的绝对位置。

Answer 1

您必须将<nav>和内容<div>打包在包装器中，并将CSS规则添加到包装器overflow: hidden - http://jsfiddle.net/7kpuH/

更新：对于粘贴在页面底部的页脚，您可能想要在这里 - Problems with CSS sticky footer

<section>
    <div id="content">
        content
    </div>

    <nav>
        navigation
    </nav>    
</section>

<footer>
    footer
</footer>

CSS

section, footer { width: 500px; margin: 0 auto; background: #eee; }
section { overflow: hidden }

#content { background: orange; width: 250px; float: left; padding: 20px; }
nav { background: beige; width: 150px; float: right; padding: 20px; }

footer { padding: 20px 0; border-top: 5px solid #fff }