html - Div 未显示全高

Question

我有一个html文件

<div class="ads_list_admin">
{$dlt_msg}

    {foreach  name = fe1 item = k from = $all_ads}
        <div class="ads_i_admin">

            <div class="ads_own">
                {$k->ad_owner}
            </div>
            <div class="ads_plc">
                {$k->ad_place}
            </div>
            <div class="ads_own">
                <a href="{$path_site}{$index_file}?menu=rm_ads&cmd=rmads">
                    Delete
                </a>    
            </div>
        </div>  
    {/foreach}
</div>

div 的 css 是:

.ads_list_admin
{
    width:560px;
    padding:10px 12px 10px 15px;
    background:#cdc;
}
.ads_i_admin
{
    width:540px;
    clear:both;
    margin:10px;
    color:#666666;
    font-family:Arial;
    font-size:13px;
}
.ads_own
{
    width:120px;
    float:left;
    padding:8px 6px 8px 6px;
}
.ads_plc
{
    padding:8px 6px 8px 6px;
    width:220px;
    float:left;
}

但是我的div高度没有满。这意味着 div 的背景颜色没有完全显示。这里有什么问题？

Answer 1

你需要清除 float ，最简单的方法是给父容器overflow:hidden

更好的方法是使用这种明确的修复技术，为父容器提供 cf 类:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}