html - 将浮点数应用于 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>

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

Answer 1

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

带有浮动元素的元素离开文档流，通过这两种方法，容器像浮动元素一样在流中运行。

清除方法是完美的，我只是给你一个方法：如果你搜索“清除浮动css”...... 例如这里

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