CSS ブロック フォーマット コンテキスト (BFC) はどのようにレイアウトを制御し、浮動要素の問題を解決しますか?

CSS ブロック フォーマット コンテキスト (BFC) はどのように機能しますか?

BFC では、要素は上から順に垂直に配置されます。新しい BFC を作成しない限り、フローティング要素は無視されます。新しい BFC は、要素に次の条件がある場合に確立されます。

• オーバーフロー: 非表示またはスクロール
• フロート: 左または右
• インラインブロック表示
• グリッドまたはフレックス表示
• 位置: 絶対または修正済み

新しい BFC が確立されると、その内容が周囲の環境から分離され、コンテキスト外のフローティング要素がコンテキスト内の要素のレイアウトに影響を与えるのを防ぎます。これは、複数列レイアウトなど、コンテンツのフローを制御するのに役立ちます。

通常のフローではボックスはどのようにレイアウトされますか?

通常のフローでは、ボックスは宣言順序に従って垂直に配置され、ブロック ボックス (div など) は親コンテナの全幅を占め、インライン ボックス (スパンなど) は親コンテナのスペースのみを占めます。 need.

フローティング要素が BFC の外側に存在する場合:

要素が BFC の外側にフローティングされている場合、要素は左または右に移動し、次のものをプッシュします要素を反対側に移動します。これが、浮動要素が HTML の後半に表示される場合でも、他のコンテンツの上に「浮動」する理由です。

新しい BFC 内に浮動要素が存在する場合:

の場合新しい BFC が確立され、そのコンテキスト内の浮動要素は含まれ、その外部の要素には影響を与えません。これは、他のコンテンツのレイアウトを乱すことなく、相互に、または親コンテナをオーバーラップできることを意味します。

新しい BFC の確立はなぜ機能するのですか?

内部のコンテンツを分離することによって新しい BFC では、残りのコンテンツのレイアウトを決定するときに、フローティング要素が存在しないかのように扱われます。これにより、フローティング要素がソース コードの前半に表示されるフロートをクリアして、制御されたレイアウトを作成することが防止されます。

BFC を使用して特定のレイアウトを実現する方法:

理解することでBFC の動作を利用して、複雑なレイアウトを簡単に作成できます。たとえば、BFC を使用して次のことができます。

• 複数列レイアウトを作成する
• サイドバーの高さがメイン コンテンツの高さと一致するようにする
• 隣接するフローティング要素が重ならないようにする

以上がCSS ブロック フォーマット コンテキスト (BFC) はどのようにレイアウトを制御し、浮動要素の問題を解決しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。