挑戦する
floatプロパティの値がleftに設定された要素があるコンテナ要素があります。 明確にするために、コンテナには境界線と背景があります。
jsFiddle
例からわかるように、コンテナーは折りたたまれます-計算された高さはゼロに設定されます。 このケースはタイプセットでよく見られます;誰もがそれに慣れており、そのような状況に遭遇したことのないレイアウトデザイナーを見つけることは困難です。
なぜこれが起こっているのですか？
実際、非置換ブロック要素（つまり、この例のコンテナ）のheightプロパティの値がautoに設定されている場合（およびこの値はデフォルトで設定されている場合）、その高さは子孫要素の高さに基づいて決定されます。 この場合、通常のフローに参加している要素のみが考慮されます。 したがって、コンテナの高さを決定するときに、フロート要素と絶対配置要素は無視されます （ 仕様を参照 ）。
解決策
この問題を解決するためのいくつかのオプションがあります。
最も明らかなのは、対応するクリアプロパティ値を持つブロックをfloat要素の後に配置することです。 この場合、ブロックはclearプロパティの定義によりfloat要素の下に配置され、コンテナはこの要素の位置に基づいて高さを計算します。
より高度な（そしておそらく最高の）ソリューションは、
しかし、もう1つの解決策があります。 コンテナをオーバーフローに設定することです：隠し。
jsFiddle
実際、すべてが適切に配置され、コンテナは内部要素の高さを受け入れますが、どのように機能しますか？
説明
この現象のメカニズムを検討する前に、オーバーフローだけでなく、隠れた問題も解決できることに注意してください。 コンテナは、float要素の高さを取得します。これが絶対位置に設定されている場合、display：inline-blockを設定し、他の場合もあります。 本当に何が起こっているのですか？
実際、これらすべてのケースで、コンテナ内に新しいブロックフォーマットコンテキストが作成されます。
ブロックフォーマッティングコンテキスト（物が置かれているボックスのような）-同じタイプの別のボックスが近くにある場合、最初の物が2番目の物の状態に影響を与えることはできません。
レイアウトに戻ると、ブロックの書式設定コンテキストは、ブロックがブロックの通常の順序で配置される環境です-上から下へ、それらの間の距離はマージンによって決定され、隣接するブロックのインデントは崩壊します（ 仕様へのリンク ）。 異なるブロック書式設定コンテキストの要素は、ページ上の互いの位置に影響を与えることはできません。
ブロックフォーマットコンテキストの概念に遭遇するのが初めての場合は、次の実用的な問題を解決してください： jsFiddle 。
だから、コンテキストの概念を理解しました。 ここで、次の質問に答えます-なぜブロック書式設定コンテキストを作成するときに、コンテナの高さを決定するためにフロート要素が考慮されるのですか？
実際、このケースは仕様で個別に指定されています。 新しいブロックフォーマットコンテキストを作成し、高さ：auto（この値はデフォルトで設定されていることを再度思い出させてください）を持つブロックの場合、次のルールが適用されます（ 仕様へのリンク ）：
要素にインデントの下端がこの要素の最下線より下にあるフロートの子孫がある場合、この要素の高さはこの面に合わせて増加します。 このブロックフォーマットコンテキスト内のフロート要素のみがこれに関与します。たとえば、絶対に配置された子孫または他のフロート子孫内のフロート要素は考慮されません。
要するに、新しいブロックフォーマットコンテキストを作成する要素の高さを決定するとき、直接子フロート要素の高さが考慮されます（そしてもちろん、通常のように、通常のストリームに参加する要素）。
新しいブロックフォーマットコンテキストが作成されたとき
この章では、新しい書式設定コンテキストが作成されるケースをリストします。 この記事の問題との関連で、このリストは、子フロート要素のブロックの高さが調整されるケースのリストです。 そのため、ブロックフォーマットコンテキストが作成されます。
- フロート要素。
- 絶対に配置された要素。
- 固定要素（位置：固定-一種の絶対位置決め、 仕様へのリンクのため ）;
- 内部のブロックコンテナを表すが、外部の構造が異なる要素（インラインブロック、テーブルセル、テーブルキャプションなど）。
- オーバーフローが可視以外の任意の値に設定されたブロック。
- fieldset要素（ほとんどのブラウザ）。
合計
この記事では、要素の高さを調整して、子のフロート要素のサイズに合わせて新しいブロックフォーマットコンテキストを作成する問題について説明します。 この質問は、ブロックフォーマットコンテキストを操作するためのメカニズムの一部にすぎませんが、この記事がCSS仕様の新しい側面を理解するのに役立つことを願っています。
ご清聴ありがとうございました。