Html 页脚不停留在页面底部，浮动左div'；s

我有多个div，其中大部分是float left。如果我在页面上放置一个绝对位置和底部0px，页脚将跳到页面的一半，并位于内容的顶部。这是我的html：

<div class="main-content">
    <div class="product-boxes">
        <div class="box-left">
            <h3>Corporate Apparel</h3>
        </div>
        <div class="box-middle">
            <h3>Tradeshow</h3>
        </div>
        <div class="box-right">
            <h3>Desk &amp; Office</h3>
        </div>
    </div>
    <div class="category-links">
        <ul>
            <li></li>
            <ul>
    </div>
    <div class="product">
        <div class="featured-item"></div>
    </div>
    <div class="order-summary">
        <p>list of cart items</p>
    </div>
</div>
<div class="footer"> </div>

---

您可以尝试在div之后放置一个空的

，并为其指定以下属性和值

。clear{clear:both；}

。此外，您还可以尝试添加一些附加规则，以确保它覆盖整个页面。

。clear{clear:both；width:100%；float:left；}

可能重复的

    .main-content {
         width: 85%;
         margin: 0 px auto;
     }
    .main-content: after {
         content: '';
         display: block;
         clear: both;
     }
     .footer {
         background: #cdced0;
         height: 112 px;
         padding: 25 px 0 px 25 px 0 px;
         width: 100% ;
         font-family: Arial, 'Helvetica Neue', Helvetica, sans - serif;
         clear: left;
     }