web-dev-qa-db-ja.com

内部にフロートを持ちながらdivの高さを増やす方法

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

csshtmloverflowcss-float
116
pedrozath

含むdivのoverflow:auto;は、その中のすべて（フロートされたアイテムも含む）を表示し、外側の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>
267
JakeParis

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

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

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

#element { zoom:1; }
14
Nikita Rybak

多くの場合、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.. }

Clearfixがなければ、親divは、フローティングチャイルドのために高さを持ちません。 clearfixは、親にフローティング子を考慮させます。

11
miphe

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

7
pedrozath