「overflow:hidden」はフロート要素とその親コン​​テナにどのような影響を与えますか?

CSS オーバーフロー:非表示と浮動小数点数の動作

CSS では、オーバーフロー プロパティは、コンテンツがコンテナのサイズを超えたときにコンテンツがどのように動作するかを制御します。浮動子を持つ要素に適用されると、overflow:hidden はレイアウトに特定の影響を与えます。

Float の動作への影響

提供された例では、ul 要素いくつかの浮遊李の子供がいます。 overflow:hidden がないと、ul は高さ 0px に折りたたまれ、その内容が表示されなくなります。これは、フロート要素が通常のフローから削除され、親要素が折りたたまれるためです。

ただし、overflow:hidden が ul に適用されると、新しいブロック フォーマット コンテキスト (BFC) が確立されます。 BFC は子要素が含まれる領域であり、領域外の要素のレイアウトには影響しません。

BFC を作成することで、overflow:hidden によって UL が折りたたまれるのを防ぎます。代わりに、フローティングされた子を含む状態で表示されたままになります。これにより、BFC の外側のテキストやその他の要素 (この場合は p 要素など) を ul の右側ではなく後に表示できるようになります。

クリア効果の適用

BFC には、子要素を含めるだけでなく、float をクリアする効果もあります。これは、ul に続くテキストまたは要素がその下の新しい行に表示されることを意味します。これは「float クリア」として知られています。

概要

CSS では、overflow:hidden が float 型の子を持つ要素に適用されます:

• 子を含む新しいブロック書式設定コンテキストを作成します。
• 親要素を禁止します
• フロートクリアとして機能し、BFC に続くコンテンツが新しい行に表示されるようにします。

以上が「overflow:hidden」はフロート要素とその親コン​​テナにどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。