CSS はブロックレベルの書式設定コンテキスト BFC を理解します-CSSチュートリアル-php.cn

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

小云云

リリース： 2018-02-24 09:50:56

オリジナル

1774 人が閲覧しました

1.BFCの定義

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

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

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

ルート要素

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

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

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

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

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

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