css不能自动把div撑大

Question

这个位置不能把css撑大

？怎么解决？

<div class="public-container index-panel">
  <div class="index-panel-header clearfloat">
     <h3>Featured Dishes</h3>
     <div class="line"></div>
     <div class="btn-group">
        <a href="" class="btn active"></a>
        <a href="" class="btn"></a>
        <a href="" class="btn"></a>
        <a href="" class="btn"></a>
     </div>
  </div>
  <div class="index-panel-body"></div>
</div>


.index-panel{
    margin-top: 200px;
}


.index-panel-header h3{
    float: left;
    margin-right: 48px;
    font-size: 20px;
    color: #3b3b3b;
    font-weight:normal;
}

.index-panel-header .line{
    float: left;
    margin-top: 7px;
    width: 200px;
    border-top: 1px solid #e5e3e3;
}

.index-panel-header .btn-group{
    font-size: 0;
    float: right;
}

.index-panel-header .btn{
    display: inline-block;
    margin-left:11px;
    width:9px;
    height:9px;
    background: #dedede;
    border-radius: 50%;
}

.index-panel-header .btn-group .active{
     background: #9b9b9b;
 }

Answer 1

问题看不明白，哪里没撑开呀？如果你贴的这段代码撑不开DIV，那就是因为你的元素都设置了float浮动属性，元素都脱离了文档流，以至于撑不开解决办法：清除浮动写一个样式：.clear:after{    content: "";    display: block;    clear: both;}然后在<div class="index-panel-header clearfloat">中加入这个样式<div class="index-panel-header clearfloat clear">注意是加入clear就可以了

Answer 2

设置overflow