CSS - 魔法のBFC - コードワールド

まず、BFCは何ですか？

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

ボックス：CSSレイアウトの基本単位
ボックス、オブジェクトおよびCSSレイアウトの基本単位、ビューの直線点であるページがボックスの数で構成されていることです。タイプ要素と表示属性は、ボックスの種類を決定します。ボックスの異なるタイプの、異なるフォーマットのコンテキストに関与する（コンテナドキュメントをレンダリングする方法を決定する）、ボックス内の要素は、様々な方法でレンダリングされるように。

ブロックレベルボックス：表示属性ブロック、リスト項目は、テーブル要素は、ブロックレベルボックスを生成します。そして、ブロックfomattingコンテキストに参加。
インラインレベルボックス：表示属性インライン、インラインブロック、要素のインラインテーブル、インラインレベルボックスを生成します。そして、インライン書式コンテキストに参加。
ランインボックス：CSS3だけで

フォーマットコンテキスト

コンテキストをフォーマットする概念W3C CSS2.1仕様です。これは、ページ領域のレンダリング、そしてそれは、子要素、および関係や相互作用および他の要素を配置する方法を決定し、レンダリングルールのセットです。そこに最も一般的なフォーマットのコンテキスト（BFCと称する）ブロックfomattingコンテキストおよび（IFCと称する）インラインフォーマット文脈。

CSS2.1のみBFCとIFC、CSS3もGFCとFFCを増加させました。

** BFC定義された**

BFC（ブロックフォーマット文脈）として翻訳された「ブロックレベル・フォーマット・コンテキスト」。それが唯一の方法を指定ブロックレベルボックスのレイアウトの内部、およびこの地域の外では何の関係もありませんブロックレベルボックス、に参加するために、独立した描画領域です。

BFCのレイアウトルール

ボックスが垂直方向の内側になり、1頭の後ろに配置されました。
ボックスの垂直距離はマージンによって決定されます。隣接する2のボックスBFCで起こる重複の余白に属し
ブロックを含む左境界ボックス（適切なフォーマット、またはその逆に左用）と接触して、各要素のマージンボックスを残しました。同じことは、そこに浮遊している場合も同様です。
BFC領域は、フロートボックスと重複しません
BFCの高さを算出し、フローティング要素も計算に関与しています
コンテナは外の要素に子要素には影響を与えない内部のBFCは、ページ上で単離し、別の容器です。そして、その逆も真です。

第二に、どのような要素は、BFCを生み出すのだろうか？

ルート要素
フロートプロパティは何もないではありません
位置は、絶対的または固定され
表示为インラインブロック、テーブル、セル、表、キャプション、フレックス、インラインフレックス
オーバーフローは見えません

第三に、原則とBFCの役割

1.適応2列のレイアウト

<style>
    body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

検索結果ページ：

BFCレイアウトルール3：
各要素の左マージンボックス、および（適切なフォーマットに左、またはその逆の場合）、接触ブロックを含む左境界ボックス。同じことは、そこに浮遊している場合も同様です。
したがって、aslideフローティング要素の存在が、それはまだ左を含む主接点ブロックを残されます。

溶液 - 第四のレイアウトルールBFC：BFC領域がフロートボックスと重なっていません。したがってBFCは、適応2列のレイアウトを実現するために、主トリガによって生成することができます。トリガーは、主BFCを生成する際に、新しいBFCはさておきフローティングと重なりません。したがって、包含ブロックの幅、及び脇自動的に幅狭。

.main {
    overflow: hidden;
}

検索結果ページ：

2. [内部浮動

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

検索結果ページ：

解決 - 条VIの規則に従ってBFCレイアウト：BFCの高さを計算する場合、フローティング要素はまた、計算に関与しています。明確な内部浮動を達成するために、我々は計算に関与することになりますパーの内部浮動要素の子の高さを計算する際にパーがBFC、その後、パーを生成するトリガすることができます。

.par {
    overflow: hidden;
}

検索結果ページ：

3.垂直重ね代を防ぎます

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

この場合、2つのP間の距離は100pxに、送信されたマージンの重複です。
BFC第2のレイアウトルール：
垂直方向の距離は、ボックスマージンによって決定されます。隣接する2のボックスBFCで起こる重複の余白に属し

溶液は、 - 容器P、容器の外側層の上に巻かれ、BFCを生成するようにトリガされてもよいです。次に、2つのPは余裕のオーバーラップを起こらなかっただろう、同じBFCに属しています。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

要約：

体現BFCレイアウト規則の記事のいくつかの例より：
BFCは、ページ上で単離し、別の容器で、容器の内部外部の要素に子要素に影響を与えません。そして、その逆も真です。