「overflow: auto」はどのようにしてフロートを魔法のようにクリアし、高さの問題を解決するのでしょうか?

オーバーフロー: 自動マジック: フロートのクリアと高さの問題の解決

あなたのジレンマは、フロート要素のデフォルトの動作に起因しており、フロート要素は削除されます。標準レイアウト フロー。これにより、含まれる要素の高さが動作します。

オーバーフローの理由: 自動でラッパーが引き伸ばされる

オーバーフロー: auto は float を直接クリアしません。代わりに、ラッパー要素の新しいブロック フォーマット コンテキスト (BFC) を確立します。この BFC には次の効果があります。

• 浮動子がラッパーからエスケープするのを防ぎます。
• ラッパーにその浮動小数点を含む高さを強制的に確立します。

この格納により、ラッパーが拡張してフロート列の周囲にフィットし、高さを解決できます。

なぜ Clear Float が必要ですか?

Float 要素は、親要素内の通常のフローからのみ免除されます。フロートの下のコンテンツを独自の行に移動する場合は、「clear」要素と呼ばれる追加の要素が必要です。この要素には、フロートの後の残りのスペースをクリアして新しい行を開始するという明示的な目的があります。

この例では、overflow: auto は BFC を確立し、フロートを効果的に含みます。ただし、フロートの後に他の要素がある場合は、明示的にクリア要素を指定しないと正しくフローされない可能性があります。

以上が「overflow: auto」はどのようにしてフロートを魔法のようにクリアし、高さの問題を解決するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。