この記事では、CSS の重要な BFC について詳しく説明します。CSS には BFC という重要な概念があり、それを理解することで、CSS の本来の奇妙な (??) 部分を理解することができます。
BFC について説明する前に、ドキュメントの流れについて説明します。私たちがよく言うドキュメントフローは、実は定置フロー、フローティングフロー、通常フローの3種類に分かれています。通常のフローは、実際には BFC の FC を指します。 FC (Formatting Context) は、文字通り書式設定コンテキストと訳され、そのサブ要素がどのようにレイアウトされるか、また他の要素との関係や役割を決定する一連のレンダリング ルールを持っています。一般的な FC には、BFC、IFC、GFC、FFC などがあります。
BFC (ブロック フォーマット コンテキスト) ブロック レベルのフォーマット コンテキストは、ブロック レベルのボックスをレイアウトするために使用されるレンダリング領域、または特定の条件下でのレンダリング ルールです。
MDN についての説明: BFC は、Web ページの視覚的な CSS レンダリング部分であり、ブロックレベルのボックスレイアウトが発生し、フローティング要素が他の要素と相互作用する領域です。
ルート要素、つまりHTMLタグ
floatの値はnoneではなく、left
、right
left
、right
overflow值不为 visible,为 auto
、scroll
、hidden
display值为 inline-block
、table-cell
、table-caption
、flex
、inline-flex
、grid
、inline-grid
position值为 absolute
、fixed
auto
、scroll
、hidden
です表示値は
inline-block
、 table-cell
、 table-caption
、 flex
、 inline-flex
、 grid
、inline-grid
位置の値は absolute
、fixed
です
BFC の計算 フローティングの子要素の高さも計算に参加する場合
4. Function
通常のドキュメント フロー内のブロック要素はフロート要素によってカバーされ、通常のドキュメント フローを占有する可能性があるため、要素のフロート、表示、位置の値を設定できます。 BFC をトリガーして、フローティング ボックス オーバーレイで覆われないようにします。
フローティング子要素を含む親ボックスの属性値を変更することで、BFC をトリガーして子要素のフローティング ボックスを含めます。 デモを見る
4.3 隣接する要素のマージンのマージを防止する
position と float を設定すると、要素がドキュメント フローから切り離され、新しい BFC が作成されることがわかっています。そのため、2 つの要素は隣接する要素ではないため、隣接する要素のマージンが結合するのを防ぐことができますが、インライン ブロックでは、 inline-flex、inline なぜ -grid と table-captain は大丈夫なのでしょうか?理由を知っている人がいたら、教えてください~
関連する推奨事項:
フローティング定義とフローティングクリアリング(BFC)の簡単な理解
以上がCSSで重要なBFCについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。