CSS のブロックレベルの書式設定について

1.BFC定義

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

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

ルート要素

float 属性が none ではない

位置

が静的かつ相対的ではない

オーバーフロー 表示されません

表示はインラインブロック、テーブルセル、テーブルキャプション、フレックス、インラインフレックスです

BFC はどこにでもあることがわかりますが、使用しているときにそれがわからないだけです

3. BFC の配置ルール:

BFC に変形した後の特徴は次のとおりです:

内部のボックスは縦方向に次々と配置されます。

ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは、各要素のマージン ボックスの左側が、それを含むブロック境界ボックスの左側と接触します (左から右への書式設定の場合はその逆)。これは浮きがあった場合にも当てはまります。

BFCエリアはフロートボックスと重なりません。

BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素には影響しません。およびその逆。

BFC の高さを計算するとき、浮動要素も計算に参加します

4. BFC 関数:

使用時にボビーになります

1. 同じサブ要素に属する

マージンの重なりを防止します

bfc マージンの重なり (ボックスの垂直方向の距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います)

問題: 画像からわかるように、20 ピクセルしかありません。 String1 と String2 の間のマージン 論理的には 40px である必要がありますが、これにより BFC 内でマージンが重複します

コード:

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

解決策: div の外側でコンテナをラップし、コンテナをトリガーできます。 BFC を生成します。この場合、2 つの div は同じ BFC に属さず、マージンの重複は発生しません。

コード:

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

2.

Clear float

:

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

コード:

<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><div class="pre2">
        <div class="float1"></div>
        <div class="float2"></div></div>

解決策:

bfc のルール: 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><div class="container2">
        <div class="box"></div>
        <p style="background-color: #eea">sdfadsfdff fffffffds fsfffff sfd  fsdsdfsdf fffffff</p></div>

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

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

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

これらの事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 PHP中国語ウェブサイトです！

関連記事:

HTML でフレームとウィンドウを分割するためによく使用される属性は何ですか?

HTML で CSS を参照する方法は何ですか?

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