CSS はブロックレベルの書式設定コンテキスト BFC を理解します

1.BFCの定義

BFC (Block formatting context) は、直訳すると「ブロックレベルの書式設定コンテキスト」となります。これは、ブロックレベルのボックス (ブロックレベルの要素) のみが参加する独立したレンダリング領域であり、内部のブロックレベルのボックスがどのようにレイアウトされるかを規定しており、平たく言えば、この領域の外側とは何の関係もありません。 : 作成済み BFC 要素は独立したボックスです。内部のサブ要素は外部要素のレイアウトに影響を与えません (内部がどのようにレイアウトされても、BFC は通常のフローに属します)。 2. BFC 生成:

BFC をトリガーする方法を知っています

次の条件のいずれかが満たされる場合、BFC をトリガーして BFC に変換できます

ルート要素

float 属性が存在しないなし
位置は静的ではなく相対的です
オーバーフローは表示されません
表示はインラインブロック、テーブルセル、テーブルキャプション、フレックス、インラインフレックスです

5. BFC はどこにでもありますが、自分だけがいつ使用するかわかりません
   

3. BFC のレイアウト ルール:

BFC に変換された後の特徴は次のとおりです:

縦方向に順番に配置していきます。

Boxの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆) 。これは浮きがあった場合にも当てはまります。
BFC エリアはフロート ボックスと重なりません。
BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。
BFC の高さを計算するとき、浮動要素も計算に参加します
4. BFC 関数:

6. 外側のマージンが重ならないようにします

1.同じBFCに属することで、BFC内のサブ要素のマージンが重なり合います(ボックスの垂直方向の距離はマージンによって決まります。同じBFCに属する2つの隣接するボックスのマージンは重なり合います)問題:画像からわかるように、論理的には 20px のマージンは 40px であるはずですが、これにより、BFC でマージンが重複してしまいます

コード:

<style>
.container1{
        /* 通过overflow：hidden可以创建bfc */
        overflow: hidden;
        background-color: red;
        width: 300px;
    }
    .sub1{
        margin: 20px 0px;
        background-color: #dea;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="sub1">String2</p>
</p>

解決策: のレイヤーをラップできますp の外側のコンテナを呼び出し、コンテナが BFC を生成するようにトリガーします。この場合、2 つの ps は同じ BFC に属さず、マージンの重複は発生しません。

コード:

<style>
    .newbfc{
            overflow: hidden;
    }
</style>
<p class="container1">
        <p class="sub1">String1</p>
        <p class="newbfc"><p class="sub1">String2</p></p>
</p>

2. フロートのクリア:

問題: 要素の子要素がすべてフローティングされている場合、高さの崩壊現象が発生します。親コンテナは引き伸ばされません

コード:

<style>
    .pre2{
        width: 200px;
        border: 2px solid red;
    }
    .float1,.float2{
        width: 100px;
        height: 100px;
        float: left;
    }
    .float1{
        background-color: #dee;
    }
    .float2{
        background-color: #dcc;
    }
</style>
<p class="pre2">
        <p class="float1"></p>
        <p class="float2"></p>
</p>

解決策:

bfc ルール: BFC の高さを計算するとき、浮動要素も計算に参加するため、親コンテナが設定されている限り、 このコンテナにはフロートされた子要素が含まれ、その高さはその子要素を含むように拡張され、この BFC ではページの通常のドキュメント フローに戻ります。

.pre2{
        width: 200px;
        border: 2px solid red;
        /* 设置overflow*/
        overflow:hidden;
    }

3. レイアウトの解決策: テキストの折り返しを防止します

コード:

<style>
.container2{
        overflow: hidden;
        width: 200px;
    }
    .box{
        float: left;
        width: 100px;
        height: 30px;
        background-color: #daa;
    }
</style>
<p class="container2">
        <p class="box"></p>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p>
</p>

p 要素は移動していませんが、フローティング要素の下に表示されます。 p 要素の行ボックス (テキスト行を参照) がシフトされます。ここでは、ライン ボックスの水平方向の縮小により、フローティング要素のためのスペースが提供されます。

BFC ルール: 各要素のマージン ボックスの左側は、それを含むブロックの境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。

この問題を解決するには、p 要素に overflow:hidden を追加して新しい BFC にします

関連する推奨事項:

CSS BFC 原理とその応用の詳細な説明

CSS の BFCそしてIFC使用例の分析

CSSに隠されたBFC

以上がCSS はブロックレベルの書式設定コンテキスト BFC を理解しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。