将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 code：

<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>

当我从课程float:left中删除services时，背景显示已满。请帮我。找不到原因。

Answer 1

将属性overflow:hidden提供给父级，或者将<div style="clear:both"></div>放在最后一个孩子之后。

具有浮动的元素离开文档的流动，使用这两种方法，容器像浮动元素一样驱动流动。

明确的方法是完美的，我只是给你一个方法：如果搜索“清除浮动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%;
}