フロントエンド知識、BFCは何ですか？

BFC名は、ブロックフォーマットコンテキストで、すなわちブロックフォーマット文脈。これは、CSS2.1仕様はCSSのポジショニングをレンダリングの概念を定義しています。最後にBFCが、視覚フォーマットモデルが何であるかを初めて目にあるかを理解するには。

ビジュアルの書式モデル

視覚整形モデルは（視覚的なフォーマットモデル）文書を処理し、映像メディアのメカニズムにそれを表示するために使用され、それはまた、CSSでの概念です。

視覚フォーマットモデル定義生成箱（ボックス）、カートリッジの部分、ボックス内の線、匿名ボックス（何名が選択ボックスにより選択することはできません）、ならびにいくつかの実験ボックスを含むカートリッジ（将来的には、本明細書に添加してもよいです）。でカセットを入力しdisplay、決定属性。

カセットブロック（ブロックボックス）

要素のCSSプロパティが場合displayであるblock、list-itemまたはtableそれはブロックレベル要素のブロックレベルである場合。
ブロックは、垂直に配置されたように、視覚的に提示します。
カートリッジ（ブロックフォーマット文脈）におけるブロックレベルの参加。
少なくとも1つのブロックレベルボックスの各ブロック要素の生成は、ブロックレベルのメインカートリッジ（主ブロックレベルボックス）と呼ばれます。いくつかの要素は、例えば<li>、場所に追加の弾丸カートリッジを生成しますが、ほとんどの主要な要素はブロックレベルボックスを生成します。

カセット行（インラインボックス）

場合要素のCSS特性display算出された値inline、inline-blockまたはinline-tableコールインラインレベル要素。
典型的なコンテンツ段落、（様々なフォーマットを集束させることができるような）テキスト、または画像は、インラインレベル要素であり、それらのビジュアルコンテンツは、行と他の行レベルの複数の要素に配置されています。
インライン形式（インライン書式コンテキスト）のコンテキストに関与する内部要素生成行レベル、行レベルのカートリッジ（インラインレベルボックス）。フォーマットはまた、インラインカートリッジ（インラインボックス）と呼ばれる行レベルのボックスのラインを生成するのコンテキスト内で関与します。すべてのdisplay:inline非カートリッジ交換要素は、カセット列の内部で生成されます。
生成されたコンテキストをフォーマットする行レベル行線ボックスに関与しない原子レベルのカートリッジ（原子インラインレベルボックス）と呼ばれます。あるいはインライン要素またはからカセットdisplay値inline-block、またはinline-table要素を形成するには、複数のカートリッジに分割しません。

匿名ボックス（匿名ボックス）

匿名カートリッジは、一部の匿名ブロック列箱と内箱匿名を取った何名匿名カートリッジは、セレクタが選択して、利用することはできませんのでので、それらの特性が全てであることinherit又は最初のデフォルト値は、

以下の実施例は、内側の行レベルのボックスに隣接するカセットを含む、匿名鍵ブロックを作成します。

<div>の
    いくつかのインラインテキストの
    段落</ P>に続いて<P>
     より、インラインテキストが続きます。
</ div>

三つの測位方式で

配置されたとき、ブラウザは、カートリッジ要素とコンテキストの種類に応じて要素を検索します。

ボックスは、位置決めの基本単位です。位置決め、3つの位置決め方式、すなわち、通常の流れがあり、フロートは、絶対配置が設定されています。

定期的なストリーム（ノーマルフロー）

通常の流れでは、カートリッジは、次々に配置されました。
ブロックレベルフォーマットコンテキストれる垂直配置。
でコンテキスト内の行フォーマットされている横向きに配置されました。
positionそれはあるstaticかrelativeとfloatのnoneそのトリガーノーマルストリーム。
以下のための静的な位置決め（静的位置決め）をposition: static、従来のフロー配置位置におけるカートリッジの位置。
以下のために相対位置（相対位置）position: relative、オフセット位置は、カートリッジによってこれらの特性が定義されtop、bottom、leftおよびright。オフセットは、まだ元の位置を保持するがあっても、他の従来のフローは、この位置を占めることができません。

浮動（フロート）

カートリッジは、浮動ボックス（浮動ボックス）と呼ばれます。
それは、現在の行の先頭や末尾に位置しています。
このノーマルストリームにリード線は、その周囲に囲まれた明確な属性が設定されていない限り、。

絶対位置（絶対位置）

絶対スキームを配置、カートリッジが通常の流れから除去され、定期的なストリームのレイアウトに影響を与えません。
そのその含有ブロック、CSS関連の属性の相対位置：top、bottom、leftおよびright、
場合は、プロパティ要素がpositionあるabsoluteか、fixedそれが絶対的に要素を配置していること。
position: absolute最近に関して位置決め要素、relative、fixedまたはabsolute親要素、そして尊重されていない場合body。

ブロックの書式コンテキスト

ここで、上記の情報から、CSS特定の理解の上に配置されていることもいる可能性があり、文脈ブロックフォーマットは、ページのCSS視覚的レンダリングの一部である領域決定ブロック浮動ボックスのレイアウトとインタラクション範囲について。

BFC作成方法

ルート要素またはそれを含む他の要素;
フローティング（要素floatではありませんnone）。
絶対配置の要素（要素positionとしてabsolute又はfixed）
内側のブロック列inline-blocks（要素display: inline-block）。
表のセル（要素display: table-cell、HTMLのデフォルト属性テーブルセル）。
overflow値はないvisible要素。
ボックス柔軟ポーチフレックス（要素display: flex又はinline-flex）

しかし、最も一般的ですoverflow:hidden、float:left/right、position:absolute。言い換えれば、私はこれらを見るたびは、BFCを作成するときに、要素の代わりにと属性。

BFC範囲

コードの一部を見てください

<DIV ID = 'div_1'クラス= 'BFC'> 
    <DIV ID = 'div_2'> 
        <DIV ID = 'div_3'> </ div> 
        <DIV ID = 'div_4'> </ div> 
    </ div> 
    < DIV ID = 'div_5'クラス= 'BFC'> 
        <DIV ID = 'div_6'> </ div> 
        <DIV ID = 'div_7'> </ div> 
    </ div> 
</ div>

このコードは、示し#div_1含むブロック・フォーマット・コンテキストを作成し#div_2、#div_3、#div_4、#div_5。その#div_2子要素もの一部で#div_1作成したBFC。しかし、に起因する#div_5ので、新しいBFCを作成#div_6し、#div_7BFCの外側の層から除外されました。

この観点から、他のことは、要素は、2つのBFCで存在することができます。

BFC効果

ちょうど述べたように、最も重要な効果BFCは孤立スペース、サーバスペースの内部と外部の要素間の相互作用を作成することです。しかし、BFCとより多くの機能。

簡単に説明をまとめると：

カートリッジの内部は垂直方向に（BFCに通常の流れと見ることができる）次々に配置されています。
相互作用の同じ要素にBFCは、マージンの崩壊が起こり得ます。
コンテナブロック境界ボックスの左側に接触している各要素の左マージンボックス（のため適切なフォーマットに左、またはその逆）。同じことは、フローティングがある場合も同様です。
BFCは、ページ別の容器に隔離され、容器は外部要素にサブ要素の内部に影響を与え、その逆もありません。
BFCの高さを算出し、BFCに含まれるすべての要素を考慮してもフローティング要素も計算に関与しています。
浮動ボックス領域は、BFCに重畳されていません。

理解することは少し難しいので、多くの自然が、理解するために、以下の推論を行うことができます：HTMLルート要素は、このある<html>ルート要素はBFC、BFCはこの内の新しい要素を作成し、新規に作成する作成しながら、時間と同等のものを<html>サブ要素新しいとしてそれを配置し<html>、相互に影響を与えずにそうすると、ページに古いものと新しいHTMLページの間にあります。

この理解の上（HTMLはルート要素であるため、BFCの特性を持っているBFCとhtmlの特性を持っていないので）原因と結果の最も正確な理解はしても逆さまではありませんが、そのような推論BFCの概念を理解するのに役立ちます。

BFCを分析するための実際のコードから

より多くの困難は、理解のは、BFCの多くの例を通してそれへの理解を深めてみましょうするために、より派手な食事〜

例1

<スタイル> 
    * { 
        マージン： 0 ; 
        パディング： 0 ; 
    } 
    .LEFT { 
        背景：＃73DE80。    / * 绿色* / 
        不透明度： 0.5 。
        ボーダー：3px固体＃1 F31264; 
        幅：200pxの。
        高さ：200pxの。
        フロート：左; 
    } 
    .RIGHT {                         / * 粉色* / 
        背景：＃EF5BE2。
        不透明度： 0.5 ; 
        ボーダー：3px固体＃1 F31264; 
        幅：400ピクセル; 
        分- 高さ：100pxに。
    } 
    ■は{ 
        背景：＃ 888 。
        高さ： 100％; 
        マージン - 左：は50px; 
    }
 </スタイル> 
の<divクラス= '箱'> 
    </ div> < '左'のdivクラス=> 
    の<divクラス= '右'> </ div> 
</ div>

ディスプレイには、以下の

グリーンボックス（「#left」）それは新しいBFC、BFCを作成しますが、その間にそれが作成されます議論するのではなく、フローティングのまま。フロートグリーンブロックするので、通常の流れでその元の位置から外れ、従って、ピンクボックス（「#right」）は親要素の灰色の左上隅に位置している（3つの特性：要素は、容器の左側と接触させたまま）、および浮動します緑色のボックスの重複が発生しました。

一方、灰色のボックス（「#box」）ので、BFCが作成されていないので、高さを計算し、フレームの緑色領域（6つの特性：フローティング領域が領域BFCに重畳されていない）を考慮していない場合には、崩壊の高さが発生し、そのこれは、一般的な問題の一つです。

例二

今で設定されたoverflow:hiddenBFCを作成し、それがどのように動作するか確認するために。

.BFC { 
    オーバーフロー：隠されました。
}

 <DIVクラス= 'ボックスBFC'> 
    <DIV CLASS = '左'> </ div> 
    <DIVクラス= '右'> </ div> 
</ div>

新しいBFCを作成するために、灰色のボックスは、高さが変更された後、緑色のボックス領域の高さの計算も考慮されます（5特性：BFCの高さを計算する場合、フローティング要素はまた、計算に関与しています）。

緑色のボックスを表示し、赤いボックスはまだ変更されません。

三つの例

<スタイル> 
    .little { 
        背景：#FFF; 
        幅：は50px; 
        高さ：は50px; 
        マージン：10pxの; 
        フロート：左; 
    }
 </スタイル> 

の<divクラス= 'ボックスBFC'> 
    の<divクラス= '左'> </ div> 
    <divのクラス= '右'> 
        の<divクラス= 'ちょっと'> </ div> 
        <divのクラス=少し''> </ div> 
        <divのクラス= 'ちょっと'> </ div> 
    </ div> 
</ div>

ピンクの箱のよう行くには右にプッシュ新しいBFC、緑色のボックスによって影響を受けるので、ピンク色のボックス白いブロックを作成しません。この最初のにもかかわらず、マージン白いブロックを見てみましょう。

4つの例

例IIと同様の方法を用いて、BFCピンクのボックスを作成しました：

<divのクラス= 'ボックスBFC'> 
    の<divクラス= '左'> </ div> 
    <divのクラス= '右BFC'> 
        の<divクラス= 'ちょっと'> </ div> 
        <divのクラス= 'ちょっと'> </ div> 
        <divのクラス= 'ちょっと'> </ div> 
    </ div> 
</ div>

、白ブロックでもある：フローティングフレームが発生重ならないBFC、ピンク、グリーンフレーム新しいピンク色ブロックを作成し、内部ブロックは、単離されたホワイトスペース（BFCの別々の容器をページ上に隔離されている特性4）にある間に回それは緑の浮動ボックスを圧迫されることはありません。

概要

これらは、BFCの分析、BFCより抽象的な概念であるが、より良いケース分析でBFCを理解することができるはずです。

実際には、使用は、フローティング要素（実施例IV）重複防止するために、フローティングBFC（実施例II）を閉鎖することができます。

一方、BFCの遮蔽効果ので、BFCは、一つの要素が外側要素を防ぐために利用することができる含まれており、この要素はBFCマージン崩壊を生じます。