将float应用于div压缩父div

Question

当我将float:left应用于子div时，父div会自动压缩。我写我下面的CSS代码：

#footer_wrapper 
{ 
    clear:both; 
    background:#f0f0f0; 
    padding:15px 10px 10px 14px; 
    border-top:1px solid #dcdcdc; 
} 
.footer 
{ 
    width:950px; 
    margin:0 auto; 

} 

.services 
{ 
    float:left; 
    width:250px; 
} 

HTML代码：

<div id="footer_wrapper"> 

    <div class="footer"> 

     <div class="services"> 
     <h2>Our Services</h2> 
      <ul> 
       <li><a href="#">7sisters Online Magazine </a></li> 
       <li><a href="#">7sisters Business Deals </a></li> 
       <li><a href="#">7sisters Yellow Pages </a></li> 
       <li><a href="#">7sisters Air Tickets </a></li> 
       <li><a href="#"> 7sisters Jobs </a></li> 
       <li><a href="#"> 7sisters Career </a></li> 
      </ul> 
     </div>  

    </div> 


</div> 

当我从services类中删除float:left的背景显示满。请帮帮我。找不到原因。

Answer 1

给财产overflow:hidden给父母或在最后一个孩子后放<div style="clear:both"></div>。

带有浮动元素的元素离开文档流，使用这两种方法，容器像浮动元素一样动作，保持流动状态。

Clear方法是臻完美，我只是给你一个方法：如果TOU搜索“清除浮动的CSS” ...... Here for example

Answer 2

您可以使用此样式代码：

#footer_wrapper 
{ 
    background:#f0f0f0; 
    padding:15px 10px 10px 14px; 
    border-top:1px solid #dcdcdc; 
    float:left; 
} 
.footer 
{ 
    width:950px; 
    margin:0 auto; 

} 

.services 
{ 
    float:left; 
    width:250px; 
} 
.services ul li, .services h2 
{ 
    float:left; 
    width:100%; 
}