html 页脚出现在包装内？

Question

我尝试了 clear:both 和 body 的相对位置，但由于某种原因它仍然总是在 wrapper 内显示得更高，我们将不胜感激

这是 jsfiddle 上的代码:

http://jsfiddle.net/38xhn4dz/

这是我正在处理的代码:

<center>
  <img src="images/eshop.jpg" width="800px" height="120px"/>
</center>
<div id="menu">
  <ul class="navigation">
    <li>
      <a href="#" >
        HOME
      </a>
    </li>
    <li>
      <a href="#">
        HOT ITEMS
      </a>
    </li>
    <li>
      <a href="#">
        SELL TO US
      </a>
    </li>
    <li>
      <a href="#">
        ABOUT US
      </a>
    </li>
    <li>
      <a href="#">
        CONTACT
      </a>
    </li>
  </ul>
</div>
<div id="wrap">
  <center>
    <div class="box">
      <h3>
        Neutrogena Body Wash
      </h3>
      <p float="left">
        <img src="images/item1.jpg" width="50%" height="200px" alt="item1"/>
      </p>
      <h4>
        3$
      </h4>
    </div>
    <div class="box">
      <h3>
        Summer Boots
      </h3>
      <p float="left">
        <img src="images/item2.png" width="50%" height="200px" alt="item2"/>
      </p>
      <h4>
        5$
      </h4>
    </div>
    <div class="box">
      <h3>
        Samsung Galaxy S4
      </h3>
      <p float="left">
        <img src="images/item3.jpg" width="50%" height="200px" alt="item3"/>
      </p>
      <h4>
        500$
      </h4>
    </div>
    <div class="box">
      <h3>
        Liquid Perfume
      </h3>
      <p float="left">
        <img src="images/item4.gif" width="50%" height="200px" alt="item4"/>
      </p>
      <h4>
        10$
      </h4>
    </div>
    <div class="box">
      <h3>
        ASUS Laptop i3
      </h3>
      <p float="left">
        <img src="images/item5.png" width="50%" height="200px" alt="item5"/>
      </p>
      <h4>
        400$
      </h4>
    </div>
    <div class="box">
      <h3>
        Sony PS2 VGA
      </h3>
      <p float="left">
        <img src="images/item6.jpg" width="50%" height="200px" alt="item6"/>
      </p>
      <h4>
        7$
      </h4>
    </div>
    <div class="box">
      <h3>
        8GB Memory Card
      </h3>
      <p float="left">
        <img src="images/item7.jpg" width="50%" height="200px" alt="item7"/>
      </p>
      <h4>
        12$
      </h4>
    </div>
    <div class="box">
      <h3>
        2GB DDR3 RAM
      </h3>
      <p float="left">
        <img src="images/item8.jpg" width="50%" height="200px" alt="item8"/>
      </p>
      <h4>
        20$
      </h4>
    </div>
    <div class="box">
      <h3>
        50" LED TV
      </h3>
      <p float="left">
        <img src="images/item9.jpg" width="50%" height="200px" alt="item9"/>
      </p>
      <h4>
        999$
      </h4>
    </div>
    <div class="box2">
      <a href="#">
        <h4>
          Next Page
        </h4>
      </a>
    </div>
  </center>
</div>

<div id="footer">
    test
</div>

CSS:

#wrap{
    width:90%;
    margin:0 auto;
    margin-top: 5em;
}
.box{
    float:left;
    width:30%;
    height:300px;
    margin:0 auto;
}   
.box2{
    float:right;
    width:30%;  
    margin:0 auto;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
    clear: both;
}

Answer 1

您不需要使用position:absolute。正如@JimmyRare 指出的那样，绝对定位是相对于窗口定位的。所以只需删除绝对定位，您的页脚就会放回到正常的文档流中。

JSFIDDLE PROOF HERE