BFCとは何ですか？用途は何ですか?

BFC

(推奨チュートリアル: css クイック スタート)

つまり、ブロック フォーマット コンテキスト (ブロック フォーマット コンテキスト)はい ページの CSS の視覚的なレンダリングの一部です。これは、ブロック ボックスのレイアウトとフロートの相互作用を決定するために使用される領域です。

私の理解:

BFC は環境です。この環境の要素は他の環境のレイアウトに影響を与えません。つまり、異なる BFC の要素は他の環境のレイアウトに影響を与えません。互いに干渉し合う。

機能:

1. マージンの崩壊を防ぐ

接続された 2 つのブロックレベル要素の垂直マージンは重なり合います。この状況はバグですが、段落レイアウトの考慮事項と、一貫した行間を確保するためのこの機能によるものである可能性があると思います。まず例を見てみましょう:

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

上記からわかるように、両方の p 要素にマージンを設定していますが、中央のスペースは折りたたまれています。次に、BFC の例を示します。

.ele{
    overflow: hidden;
    border: solid 1px red;
}

上記からわかるように、各 div 要素のオーバーフロー値を非表示に設定し、ブロックレベルのフォーマット コンテキストを生成します。マージンが互いに重ならないためです。

2. BFC には浮動要素を含めることができます

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

実行結果からわかるように、ブロック レベルの要素がフローティング要素の高さは折りたたまれますが、BFC に変換すると、BFC は高さを計算するときにフローティング要素を自動的に考慮します。

3. BFC は、浮動要素によって要素が上書きされるのを防ぐことができます

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

上記からわかるように、要素が浮動している場合、後続のブロックレベル要素は互いに重なり合います。この問題を解決するには、次の要素の BFC を作成するだけです。 box2 にオーバーフロー属性を追加します。

overflow: hidden;
*zoom: 1;

これにより、フローティング要素が重なり合う問題が回避されます。

以上がBFCとは何ですか？用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。