「overflow: auto」を使用すると、フロート要素に合わせてコンテナが拡張されるのはなぜですか?

フロート要素を収容するために「overflow: auto」がコンテナの高さを拡張するのはなぜですか?

フロート要素を含む 2 列レイアウトを実装する場合、コンテナーがフローティングの子に合わせて垂直方向に拡張されないという問題が発生する場合があります。 'overflow: auto' をコンテナに追加すると、この問題は解決されます。

Float について

Float 要素は通常のドキュメント フローの外側に配置され、他の要素の隣に浮かんでいるように見えます。 。そのため、親コンテナは浮動要素の存在を認識せず、自身の高さを計算するときにそれらの高さを考慮しません。

クリアランスとオーバーフロー

強制する親コンテナーがフローティングされた子を収容するには、フロートをクリアするか、新しいブロック フォーマット コンテキスト (BFC) を確立する必要があります。オーバーフロー: 自動は、新しい BFC を作成する CSS プロパティです。

オーバーフロー: 自動で BFC を作成する方法

オーバーフロー: 自動は、次のような特定の条件を満たすことによって BFC を確立します。 :

• フローティングの新しい包含ブロックの作成要素
• 「overflow」プロパティを「auto」に設定する

BFC を確立する利点

BFC を確立すると、次のことが可能になります。発生します:

• 浮動要素は、新しい包含要素内に制約されますblock
• コンテナーはフローティングされた子を収容するために強制的に垂直に拡張されます

フロートのクリアに関する注意

オーバーフロー: 自動はクリアされません浮く。 BFC を作成するだけです。 float をクリアするには、float 要素の後に「clear:both」スタイルの div などのクリア要素を追加する必要があります。ただし、親要素はそれ自体の浮動子をクリアできません。

以上が「overflow: auto」を使用すると、フロート要素に合わせてコンテナが拡張されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。