フロート要素はコンテナ要素の高さに追加されないため、それらをクリアしないと、コンテナの高さは増加しません...
視覚的にお見せします：
詳細な説明：
<div>
<div style="float: left;"></div>
<div style="width: 15px;"></div> <!-- This will shift
besides the top div. Why? Because of the top div
is floated left, making the
rest of the space blank -->
<div style="clear: both;"></div>
<!-- Now in order to prevent the next div from floating beside the top ones,
we use `clear: both;`. This is like a wall, so now none of the div's
will be floated after this point. The container height will now also include the
height of these floated divs -->
<div></div>
</div>
overflow: hidden;コンテナ要素を追加することもできますが、clear: both;代わりに使用することをお勧めします。
また、あなたが使用できる要素をセルフクリアしたい場合は
.self_clear:after {
content: "";
clear: both;
display: table;
}
CSS Floatはどのように機能しますか？
フロートとは正確には何ですか？
floatプロパティは、ほとんどの初心者で誤解されています。さて、正確には何をしfloatますか？当初、このfloatプロパティは、フロートleftまたはである画像の周りにテキストを流すために導入されましたright。@Madara Uchichaによる別の説明を次に示します。
では、floatボックスを並べて配置するためにこのプロパティを使用するのは間違っていますか？答えはノーです。floatボックスを並べて設定するためにこのプロパティを使用しても問題はありません。
inlineor block要素をフローティングすると、要素のように動作しinline-blockます。
デモあなたは要素をフロートした場合leftやright、width要素のがない限り、それは、保持しているコンテンツに制限されますwidth明示的に定義されています...
float要素は使用できませんcenter。これは、初心者がいつも使用してきた最大の問題float: center;floatプロパティの有効な値ではありません。float通常は、floatコンテンツを左端または右端に/ moveするために使用されます。唯一存在する4の有効な値floatのプロパティすなわちleft、right、none（デフォルト）とはinherit。
親要素が折りたたまれている場合、フローティングされた子要素が含まれている場合、これを防ぐために、clear: both;プロパティを使用して両側のフローティングされた要素をクリアし、親要素の折りたたみを防ぎます。詳細については、こちらの別の回答を参照してください。
（重要）さまざまな要素のスタックがある場所を考えてください。使用するとき、float: left;またはfloat: right;要素がスタックの上に1つ移動するとき。したがって、通常のドキュメントフローの要素は、通常のフロート要素の上のスタックレベルにあるため、フロート要素の後ろに隠れます。（これz-indexは完全に異なるため、これに関連付けないでください。）
例として、CSSフロートがどのように機能するかを説明するために、ヘッダー、フッター、2列のシンプルな2列のレイアウトが必要であると仮定して、ブループリントは次のようになります...
上記の例では、赤いボックスのみをフローティングにします。float両方をに配置するleftか、またはに配置floatしてleft、もう1つをright配置するかは、レイアウトによって異なります。3列の場合、別の場所にfloat2列配置できますleft。 1つはrightので、この例では、我々は簡略化され2列のレイアウトを持っているものの、依存ので、意志floatの1 leftとする他のをright。
レイアウトを作成するためのマークアップとスタイルについては、後で説明します...
<div class="main_wrap">
<header>Header</header>
<div class="wrapper clear">
<div class="floated_left">
This<br />
is<br />
just<br />
a<br />
left<br />
floated<br />
column<br />
</div>
<div class="floated_right">
This<br />
is<br />
just<br />
a<br />
right<br />
floated<br />
column<br />
</div>
</div>
<footer>Footer</footer>
</div>
* {
-moz-box-sizing: border-box; /* Just for demo purpose */
-webkkit-box-sizing: border-box; /* Just for demo purpose */
box-sizing: border-box; /* Just for demo purpose */
margin: 0;
padding: 0;
}
.main_wrap {
margin: 20px;
border: 3px solid black;
width: 520px;
}
header, footer {
height: 50px;
border: 3px solid silver;
text-align: center;
line-height: 50px;
}
.wrapper {
border: 3px solid green;
}
.floated_left {
float: left;
width: 200px;
border: 3px solid red;
}
.floated_right {
float: right;
width: 300px;
border: 3px solid red;
}
.clear:after {
clear: both;
content: "";
display: table;
}
レイアウトを1つずつ見ていき、フロートがどのように機能するかを見てみましょう。
まず最初に、メインのラッパー要素を使用します。それをビューポートであると想定して、そこに何もないものを使用headerして割り当てます。これは、フロートされていないか、割り当てられていない限り、水平スペースを占める通常の非フロートブロックレベルの要素です。height50px100%inline-block
の最初の有効な値floatはleft、この例ではfloat: left;for を使用している.floated_leftのでleft、コンテナ要素のにブロックをフロートするつもりです。
コラムは左に浮いた
そして、はい、表示されている場合、.wrapper折りたたまれている親要素は、緑色の境界線で表示されているものは拡張されていませんが、正しく表示されますか？しばらくしてその状態に戻りますが、今のところ、カラムはにフロートしていleftます。
2列目に来て、floatこれをright
別の列が右に浮かんでいた
ここには、への300px幅の広い列があります。これはfloat、rightに浮かんでいるときに最初の列の横に配置され、にleft浮いているleftので、に空の樋が作成されright、に十分なスペースがあったためright、right浮いた要素はその横に完全に座っていましたleft。
それでも、親要素は折りたたまれています。まあ、それを修正しましょう。親要素が折りたたまれないようにする方法はたくさんあります。
- 空のブロックレベルの要素を追加して、
clear: both;浮動要素を保持する親要素が終了する前に使用しclearます。これは、浮動要素の安価な解決策ですが、代わりに機能しますが、使用しないことをお勧めします。
次のよう<div style="clear: both;"></div>に、.wrapper div終わりの前に追加します
<div class="wrapper clear">
<!-- Floated columns -->
<div style="clear: both;"></div>
</div>
デモ
まあ、それは非常にうまく修正され、折りたたまれた親はなくなりましたが、DOMに不要なマークアップが追加されるためoverflow: hidden;、意図したとおりに機能するフローティング子要素を保持する親要素で使用することをお勧めします。
使用overflow: hidden;する.wrapper
.wrapper {
border: 3px solid green;
overflow: hidden;
}
デモ
これにより、必要になるたびに要素を節約できますclear floatが、これを使用box-shadowしてさまざまなケースをテストしたところ、子要素を使用する特定のケースで失敗しました。
デモ（4辺すべての影が見えない、overflow: hidden;この問題の原因）
ならどうしよう？要素を保存します。overflow: hidden;明確な修正ハックに進み、CSSで以下のスニペットを使用overflow: hidden;します。親要素と同じように、親要素でclass以下を呼び出して自己消去します。
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
デモ
ここで、影は意図したとおりに機能し、折りたたむのを防ぐ親要素をセルフクリアします。
そして最後に、clearフロートした要素の後にフッターを使用します。
デモ
ときにされたfloat: none;任意の使用が宣言するので、それがデフォルトですと、とにかく使用float: none;？
まあ、それは、もしあなたがレスポンシブデザインをしようとしているなら、あなたがフローティング要素をある解像度で上下にレンダリングしたいとき、この値を何度も使うでしょう。そのfloat: none;プロパティのためにそこで重要な役割を果たしています。
がどのようfloatに役立つかを示す実例はほとんどありません。
- すでに見た最初の例は、1つまたは複数の列レイアウトを作成することです。
- コンテンツを
imgフロートさせるフロート内部pを使用します。
デモ（フローティングなしimg）
デモ2（にimgフロートleft）
2番目の要素もフロートするか、 `margin`を使用します
最後に重要なことですが、float要素を1つだけにし、他の要素leftはしないfloatというこの特定のケースについて説明したいと思います。
我々は削除する場合としfloat: right;、当社から.floated_right class、div極端からレンダリングされるleftことが浮いていないよう。
デモ
したがって、この場合は、どちらかのことができますfloatするleftだけでなく
または
左フロートカラムのサイズと同じになる、つまり幅の広い方を使用margin-left200pxできます。