html - 为什么我的页脚不显示在正确的区域？我可以影响 CSS 吗？

Question

在我的网站 christianselig.com 上，我的页脚出现在除 about.html 页面 (http://christianselig.com/about.html) 之外的所有页面上，由于某些原因它显示在顶部附近。

该页面由两个 float div(一左一右)组成，一个 div 包裹着这两个 div，我意识到 float 可能是问题所在，但我不知道该怎么做。相关的 CSS 和 HTML 可以在下面找到，而且显然可以在网站上找到更多内容。

HTML:

<div class="footer-wrapper">
            <div class="footer">
                <p class="copyright">Copyright &copy; 2012 Christian Selig</p>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </div>

CSS:

.footer-wrapper {
    background: #f7f7f7; /* Old browsers */
    background: -moz-linear-gradient(top,  #f7f7f7 0%, #d6d6d6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#d6d6d6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #f7f7f7 0%,#d6d6d6 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #f7f7f7 0%,#d6d6d6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#d6d6d6',GradientType=0 ); /* IE6-9 */
    border-top: 1px solid #ccc;
    margin: 15px auto 0 auto;
    overflow: hidden;
    padding: 8px 0 5px 0;
}

    .footer {
        color: #808080;
        clear: both;
        font-family: 'Lucida Grande', Helvetica, Arial, sans-serif;
        font-size: 0.7em;
        width: 900px; 
    }

        .copyright {
            float: left;
            margin: 0 0 5px 60px;
        }

        .footer ul {
            float: right;
            margin: 0 60px 5px 0;
        }

        .footer li {
            display: inline;
            padding-right: 12px;
        }

            .footer li:last-child {
                padding-right: 0;
            }

        .footer a {
            color: #808080;
            text-decoration: none;
        }

        .footer a:hover, .footer a:active {
            text-decoration: underline;
        }

如有任何帮助，我们将不胜感激!

Answer 1

您的问题在 lr-wrapper 中。您的两个元素 left-side 和 right-side 没有填满整个宽度，在中间留有空间供其他 float 元素容纳。

您需要在页脚之前添加一个 clear 以告诉所有其他元素留在下方，您可以通过将其添加到页脚 div 上方来实现:

<div style="clear: both;"></div>

或者您可以通过将其添加到您的 css 中以正确的方式做到这一点，然后在您需要打破 float 时只需应用类 clearfix:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

可在此处找到更多相关信息:http://html5boilerplate.com/