Question

有人可以解释这个奇怪的现象：

出于某种原因，盒子页脚的高度被认为是0px（它没有将页脚的内容考虑为高度），因此边框没有正确显示。如果我浮动页脚或将其设置为固定高度，则可以修复此问题。如果我不能漂浮它并且我不能使用固定高度怎么办 - 那么我的选择是什么？

HTML

<div id="footer">
    <div class="left"> <a href="#">Home</a> <a href="#">Products</a> <a href="#">About</a> <a href="#">Contact</a> </div>        
</div>

CSS

#footer {
    width:970px;
    margin:0 auto;
    border:1px solid red;
}
#footer .left {
    float:left;
    width:250px;
    margin-top:20px;
}
#footer .left a {
    float: left;
    display: block;
    padding: 0px 0px 0px 7px;
    color: #969696;
    text-decoration: none;
}

Answer 1

在#footer上使用overflow: hidden;。

Answer 2

你必须清除你的花车，否则父盒子（在这种情况下是#footer）会崩溃。

<div id="footer">
  <div class="left"> 
    <a href="#">Home</a> 
    <a href="#">Products</a> 
    <a href="#">About</a> 
    <a href="#">Contact</a> 
    <div style="clear:both;"></div><!-- clear floated elements (anchor tags) on this level -->
  </div>
  <div style="clear:both;"></div><!-- clear floated element (div.left) on this level -->        
</div>

Answer 3

#footer和类名（'left'）之间不应该有任何空格，即它应该是＃footer.left和＃footer.left a：

您的更新代码如下： http://jsfiddle.net/sPA2V/1/

边境不能正常工作？

3 个答案: