CSS2.1 の非表示オーバーフローはブロック書式設定コンテキストを作成し、レイアウトにどのように影響しますか?

CSS2.1 のオーバーフロー動作: 新しいブロック フォーマット コンテキストの確立

CSS2.1 では、仕様により、 「visible」は、新しいブロック フォーマット コンテキスト (BFC) を確立します。この決定により、BFC 作成とオーバーフロー隠蔽という一見無関係に見える 2 つの機能を統合する背後にある理論的根拠について疑問が生じています。

目に見えないオーバーフローを使用して BFC を確立する理論的根拠

この動作の理由は、特定のシナリオでスムーズなスクロールを保証する必要があることにあります。オーバーフローしたコンテンツを含むコンテナーがスクロール可能な場合、フロートがそのコンテンツと交差できるようにするには、ユーザーがスクロールするときにブラウザーがフロートの周囲でコンテンツを常に再ラップする必要があります。この再ラップ プロセスは、スクロールのパフォーマンスに大きな影響を与えます。

非表示オーバーフローのレイアウトへの影響

非表示オーバーフローのある要素が BFC を確立すると、要素全体がは、同じブロック書式設定コンテキスト内の浮動要素に道を譲るために脇に押しやられます。この動作により、要素の境界ボックスがフロートのマージン ボックスと重なることがなくなり、適切なレイアウトが保証されます。

高さによる要素の伸縮: 自動および非表示のオーバーフロー

CSS2.1 では、高さ: auto の要素と非表示のオーバーフローがフロートの高さに合わせて垂直に伸びるという追加の変更が導入されました。この変更により、このような要素はクリッピングせずにフローティング コンテンツを完全に含めることができます。

オーバーフロー動作の例外

非表示のオーバーフローを使用して新しい BFC を確立するという一般的なルールにもかかわらず、例外があります:

• 要素の高さが固定されている場合、フロートはクリップされます。コンテナと要素は伸縮しません。
• 要素にclear: leftまたはclear:両方が適用されている場合、非表示のオーバーフローがあるかどうかに関係なく、要素は垂直方向にプッシュされます。

結論

目に見えないオーバーフロー値を持つ新しいブロックフォーマットコンテキストを確立する決定CSS2.1 は主に、スクロールのパフォーマンスを強化し、フロートが存在する場合でも一貫したレイアウトを確保する必要性によって推進されました。この動作は、高さのある要素に関する追加の変更 (自動オーバーフローと非表示オーバーフロー) とともに、より堅牢で予測可能なレイアウト モデルを提供します。

以上がCSS2.1 の非表示オーバーフローはブロック書式設定コンテキストを作成し、レイアウトにどのように影響しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。