CSSで重要なBFCについて詳しく解説

この記事では、CSS の重要な BFC について詳しく説明します。CSS には BFC という重要な概念があり、それを理解することで、CSS の本来の奇妙な (??) 部分を理解することができます。

1. はじめに

BFC について説明する前に、ドキュメントの流れについて説明します。私たちがよく言うドキュメントフローは、実は定置フロー、フローティングフロー、通常フローの3種類に分かれています。通常のフローは、実際には BFC の FC を指します。 FC (Formatting Context) は、文字通り書式設定コンテキストと訳され、そのサブ要素がどのようにレイアウトされるか、また他の要素との関係や役割を決定する一連のレンダリング ルールを持っています。一般的な FC には、BFC、IFC、GFC、FFC などがあります。

BFC (ブロック フォーマット コンテキスト) ブロック レベルのフォーマット コンテキストは、ブロック レベルのボックスをレイアウトするために使用されるレンダリング領域、または特定の条件下でのレンダリング ルールです。

MDN についての説明: BFC は、Web ページの視覚的な CSS レンダリング部分であり、ブロックレベルのボックスレイアウトが発生し、フローティング要素が他の要素と相互作用する領域です。

2. BFCトリガーメソッド

1. ルート要素、つまりHTMLタグ

2. floatの値はnoneではなく、left、rightleft、right

3. overflow值不为 visible，为 auto、scroll、hidden

4. display值为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid

5. position值为 absolute、fixed

オーバーフロー値は表示されませんが、auto、scroll、hidden です

表示値は inline-block 、 table-cell、 table-caption、 flex、 inline-flex、 grid、inline-grid

位置の値は absolute、fixedです

注:
2. display:table も生成可能 BFC の理由は、Table がデフォルトで匿名テーブル セルを生成し、BFC を生成するのはこの匿名テーブル セルであるためです。
   3. 制約ルール

BFC 領域のブラウザ制約ルール:

1. 生成された BFC 要素の子要素が順番に配置されます。垂直方向の開始点は、それを含むブロックの上部であり、隣接する 2 つの子要素間の垂直距離は、要素の margin プロパティによって異なります。 BFC では、隣接するブロックレベル要素のマージンが折りたたまれます (マスタリング マージンの折りたたみ)。

2. 生成された BFC 要素の子要素では、フローティングの場合でも、各子要素の左マージンが、それを含むブロックの左の境界線に接します (右から左への書式設定の場合、右マージンは右の境界線に接します)。 (子要素のコンテンツ領域はフローティングにより圧縮されますが)、子要素が新しい BFC も作成する場合を除きます (たとえば、子要素自体がフローティング要素である場合)。

3. ルールの解釈:

4. 内部ボックスは垂直方向に次々に配置されます

5. 内部ボックス間の垂直距離はマージンによって決まります。 (完全なステートメントは次のとおりです。同じ BFC に属する 2 つの隣接するボックスのマージンは折り畳まれますが、異なる BFC は折り畳まれません。)

各要素の左マージンは、それを含むブロックの左境界線に接します ( left右へ)、浮動要素の場合でも同様です。 (これは、BFC のサブ要素がその包含ブロックを超えないことを示していますが、絶対位置を持つ要素はその包含ブロックの境界を超えることができます)

BFC の領域は、BFC の要素領域と重なりません。 float

BFC の計算 フローティングの子要素の高さも計算に参加する場合

4. Function

BFC はページ上で分離された独立したコンテナーであり、コンテナー内の子要素は影響を受けません。外側の要素、またはその逆。 BFC のこの機能を使用して、さまざまなことができます。

4.1 要素がフローティング要素によって覆われないようにする

通常のドキュメント フロー内のブロック要素はフロート要素によってカバーされ、通常のドキュメント フローを占有する可能性があるため、要素のフロート、表示、位置の値を設定できます。 BFC をトリガーして、フローティング ボックス オーバーレイで覆われないようにします。

デモを見る

4.2 フローティング要素を含めることができます

フローティング子要素を含む親ボックスの属性値を変更することで、BFC をトリガーして子要素のフローティング ボックスを含めます。 デモを見る

4.3 隣接する要素のマージンのマージを防止する

🎜同じ BFC に属する 2 つの隣接するブロックレベルのサブ要素の上下のマージンが重なり合います (writing-mode:tb-rl のときに水平マージンが発生します)が設定されている）オーバーラップ）。したがって、隣接する 2 つのブロックレベルの子要素が異なる BFC に属する場合、マージンの重複を防ぐことができます。 🎜ここでは、隣接するブロック レベル ボックスの外側を p で囲み、この p の属性を変更して、マージンの重複を防ぐために 2 つの元のボックスが 2 つの異なる BFC に属するようにします。 🎜🎜デモを見る🎜🎜🎜しかし、ここに質問があります: 🎜🎜 p のレイヤーでラップされている場合、BFC をトリガーできる属性を設定すると、隣接する要素のマージンがマージされなくなる可能性があります。これらは異なる BFC に属しているため、マージンのマージは発生しません。 🎜外側に p を含めない場合、display を inline-block、inline-flex、table-captain、position を絶対、fixed、float を left または right に設定すると、マージンのマージを防ぐことができます。ここで質問があります: 🎜

position と float を設定すると、要素がドキュメント フローから切り離され、新しい BFC が作成されることがわかっています。そのため、2 つの要素は隣接する要素ではないため、隣接する要素のマージンが結合するのを防ぐことができますが、インライン ブロックでは、 inline-flex、inline なぜ -grid と table-captain は大丈夫なのでしょうか?理由を知っている人がいたら、教えてください~

関連する推奨事項:

CSSにBFCが隠されています

BFCとは何ですか? bfc

フローティング定義とフローティングクリアリング(BFC)の簡単な理解

以上がCSSで重要なBFCについて詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。