自動高さとその中の浮動小数点のdivを持つコンテナDivを取得するには？

Question

は、私は、次のHTML

<style type="text/css"> 
<!-- 
.msg_ok{ 
    font-family: "Trebuchet MS"; 
    font-weight: bold; 
    font-size: 16px; 
    margin:0 auto; 
    padding:10px; 
    width:500px; 
    height:auto; 
    display:block; 
} 
.msg_ok{ 
    background-color:#DCFFB9; 
    border:#003300 1px solid; 
    color:#003500; 
} 
--> 
</style> 

     <div class="msg_ok" style="height:auto;"> 

     <div style="display:block;float:left;width:350px; height:auto;"> 
      <p>line 1<br> 
      line2<br> 
      line3<br> 
      line4<br> 
      line5<br> 
      </p> 
     </div> 
     <div style="display:block;float:left;width:100px; height:auto;"> 
     <a href="#">Print</a> 
     </div> 

     </div> 

を持っていると私は、次の、そのサイズに合わせて自動高さを持つコンテナのdivのような結果を得ることができる方法

しかし、この結果を得ます内部のフローティングディビジョンと？

事前

Answer 1

のおかげでは、これらの

.msg_ok{ 
    overflow:hidden; 
    zoom:1; 
} 

を追加し、高さは常に（デフォルト）autoですので、それは無用だ、height:autoを削除します。あなたが直面している問題は浮動小数点の使用方法

Answer 2

フロートをクリアする浮動要素の後に要素を追加する必要があります。一般的に：

Answer 3

浮動要素が含まれている場合、親が高さを失うことを避けるために、クリア修正「ハック」を探していると思いますか？

は最後の浮動DIV後<div class="clear">&nbsp;</div>を追加し、以下のCSSを使用します。

.clear { 
    float: none; 
    clear: both; 
    height: 0; 
} 

Answer 4

ベストの方法は、clearfixを使用しています。このリンクを参照してください - http://css-tricks.com/snippets/css/clear-fix/

Answer 5

は参照[このページ]（http://www.positioniseverything.net