内部にフロートがありながらdivを高さに成長させる方法

内部にフロートがある場合、divの高さを上げるにはどうすればよいですか？幅の値を定義し、オーバーフローを非表示に設定することは知っています。問題は、オーバーフローが見えるdivが必要なことです。何か案は？

overflow:auto;含まれているdivでは、その内部（フロートされたアイテムも含む）がすべて表示され、外側のdivがそれらを完全にラップします。この例を見てください：

.wrap {
  padding: 1em;
  overflow: auto;
  background: silver;
 }
 
.float {
  float: left;
  width: 40%;
  background: white;
  margin: 0 1%;
}

<div class="wrap">
  <div class="float">Cras mattis iudicium purus sit amet fermentum. At nos hinc posthac, sitientis piros Afros. Qui ipsorum lingua Celtae, nostra Galli appellantur. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Ambitioni dedisse scripsisse iudicaretur.</div>
  <div class="float">Mercedem aut nummos unde unde extricat, amaras. A communi observantia non est recedendum. Quisque ut dolor gravida, placerat libero vel, euismod. Paullum deliquit, ponderibus modulisque suis ratio utitur.</div>
  </div>

フロートをクリアする方法は複数あります。ここでいくつか確認できます：http :
//work.arounds.org/issue/3/clearing-floats/

たとえば、clear:bothあなたのために働くかもしれません

#element:after {
    content:"";
    clear:both;
    display:block;
}

#element { zoom:1; }

多くの場合、これoverflow: auto;で十分ですが、補完とブラウザ間のサポートのために、すべてのブラウザで機能するClearfixを確認してください。

次のマークアップについて考えてみましょう。

<div class="clearfix">
   <div class="content">Content 1</div>
   <div class="content">Content 2</div>
</div>

以下のスタイルと一緒に..

.content { float:left; }

.clearfix { ..from link.. }

クリアフィックスがないと、フローティングチャイルドであるため、親にdiv高さがありません。clearfixは、親に浮動子を考慮させます。

私はそれを行うための素晴らしい方法display: tableがdivに設定することだと考えました。