設置爲浮點值時高度未調整？

Question

我寫了一個HTML頁面，
CSS是

body{ 
    margin: 0 auto; 
    min-width: 992px; 
    background: #f2f2f2; 
    } 
.container{ 
    margin: 30px auto; 
    padding:5px; 
    width: 992px; 
    height: auto; 
    border: 1px solid #C6C6C6; 
    border-radius: 15px; 
    background: #FFF; 
    } 
.column{ 
     margin:0px 5px 5px 0px; 
     float:left; 
     height: 50px; 
     width: 486px; 
     background: #0094ff; 
     } 

和身體是

<div class="container"> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
    <div class="column"></div> 
</div> 

當我運行這個頁面

從DIV刪除float:left類.column，.container的高度自動增加，但是當我設置div類.column的浮動值時，div類.container的高度不增加。
請誰能告訴我如何解決這個問題？

Answer 1

添加overflow:hidden;到.containar

Answer 2

如果您將float元素添加到您的.cointanar類中，您將獲得您想要的結果。

通過將fololowing性能只需更新CSS：

.containar { /* shouldn't it be "container"? */ 
    float: left; 
} 

演示小提琴：http://jsfiddle.net/yd43nymw/1/