css - floatを使用する場合のCSS発行のdivの高さ

Question

私はdivこのような領域を持っています:

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
</div>

そしてCSS：

.con{
    width:100%;     
}
.con .container{
    width:70%;
    min-height:500px;
    float:left;
    background:#f00;

}
.con .sidebar{
    width:30%;
    min-height:500px;
    float:right;
    background:#ccc;

}

containerおよびクラスのsidebar高さは動的です。これらのクラスの高さのいずれかが増加すると、クラスconも増加する必要があります。しかし、私の問題は、クラスの高さが常に 0 であることです。クラスに静的な高さconを与えることができないようです。con

Answer 1

overflow: auto;に追加.con：

.con {
    width: 100%; 
    overflow: auto;    
}

Answer 2

明確なクラスを使用する

<div class="con">
    <div class="container"></div>
    <div class="sidebar"></div>
    <div class="clear"></div>
</div>

.clear
{
   clear:both;
}

Answer 3

.conの高さが伸びない理由が重要な理由はわかりませんが、これはかなり悪名高い問題です。に追加overflow: hiddenし.conます。それがうまくいかない場合は<br style="clear: both;">、タグの後に入れてください。

Answer 4

これを試して

.con{
    width:auto; 
    overflow: auto;
    margin:0 auto;    
}