BFC_html/css_WEB-ITnose の深い理解

× Directory [1]Definition [2] Trigger [3] Effect

Definition

BFC を説明する前に、ドキュメント フローについて説明します。私たちがよく言うドキュメントフローは、実はポジショニングフロー、フローティングフロー、通常フローの3種類に分けられます。通常のフローは、実際には BFC の FC を指します。 FC は、フォーマッティング コンテキストの略語で、文字通りフォーマット コンテキストと訳されます。これは、サブ要素がどのようにレイアウトされるか、および他の要素との関係と役割を決定する一連のレンダリング ルールを持ちます。一般的な FC には、BFC、IFC、GFC、FFC などがあります。 BFCはブロックレベルのフォーマットコンテキストであり、ブロックレベルのボックスをレイアウトするために使用されるレンダリング領域です

トリガー条件

以下のいずれかの条件が満たされた場合にBFCがトリガーされます

。 【1】ルート要素、つまりHTML要素

【2】floatの値がnoneではない

【3】overflowの値が見えない

【4】displayの値がinline-block、 table-cell, table-caption, flex

【 5】position の値は絶対か固定です

Function

BFC はページ上で独立した独立したコンテナであり、コンテナ内のサブ要素は影響を与えません。外部要素、またはその逆。通常のブロックボックスと似ていますが、異なる点は次のとおりです。

【1】要素がフローティング要素で覆われないようにすることができます

<説明> 内容がBFCで背景のあるボックスの属性値を変更することで、が赤の場合はBFCとなり、緑色のフローティングボックスに覆われないようにします

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

<説明> 高度に潰れた黒い境界線を持つボックスの属性値を変更することで、緑色のフローティング ボックスを含む BFC

[3] 同じ BFC に属する 2 つの隣接するブロックレベルのサブ要素の上下のマージンが重なり合います (writing-mode: tb-rl が設定されている場合、水平マージンは重なります)。重なってしまいます）。したがって、2 つの隣接するブロックレベルのサブ要素が異なる BFC に属している場合、マージンが重ならないようにすることができます

<説明> 背景が明るい赤色のブロックレベルのボックス 2 は div で囲まれており、赤いボックスはこの div の属性を変更することで赤色になり、マージンの重複を防ぐために緑色のボックスが付いている 2 つの異なる BFC に属します