我有多个div和其中大多数是浮在左边。如果我在页面上放置一个绝对和底部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>

下面是我的CSS：

    .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;
     }