オープニング
float 要素、位置が絶対である要素、インラインブロック、テーブルセルまたはテーブルキャプションの要素、およびオーバーフロー属性が表示されない要素などの一部の要素は、新しいブロックレベルの書式設定コンテキストを確立します。
上記の定義では、ブロック フォーマット コンテキスト (Block Formatting Context) がどのように形成されるかを詳しく説明しています。便宜上、この記事では代わりに BFC を使用します。ここで、これを簡単な方法で再定義してみましょう:
BFC も HTML のボックスです (単に非表示です)。BFC は、次の条件の少なくとも 1 つが満たされる場合にのみ形成されます:
float 属性は none ではありません。
position 属性は静的かつ相対的ではありません。
display 属性は、table-cell、table-caption、inline-block、flex、または inline-flex のいずれかです。
overflow 属性は表示されません。
HTML コードは次のとおりです:
<div class="container"> Some Content here</div>
CSS を使用して、overflow: スクロール、オーバーフロー: 非表示、表示: などの上記の条件をコンテナ コンテナに付加できます。 flex、float: left、または display: table は BFC を形成できますが、それぞれのパフォーマンスは異なります:
display: table : レスポンシブ レイアウトでは問題が発生します
overflow: スクロール : 問題が発生する可能性があります。 Bar
float: left: 要素を左にフロートさせ、他の要素で囲みます
overflow: hidden: オーバーフロー部分を削除する
BFC の確立は overflow:hidden :
.container { overflow: hidden; }W3C 仕様では、次のように説明されています。
ブロックの書式設定コンテキストでは、各ボックスの左外端が、それを含むブロックの左端に接触します (右から左への書式設定の場合、右端は接触します)。ボックスが新しいブロック書式設定コンテキストを確立しない限り、フロートの存在 (ただし、ボックスの行ボックスはフロートによって縮小する可能性があります) (この場合、ボックス自体はフロートによって狭くなる可能性があります)。bfcbfc.jpg
簡単に言うと、上の図の BFC に属するすべてのボックスはデフォルトで左揃えになっており、その左マージンがコンテナの左側に触れることができます。最後のボックスは浮いていますが、依然としてこの原則に従っています。 (BFC のフローティングについては後述します)
-それでは、BFC の用途は何ですか?
-実際、非常に便利です
通常の状況では、コンテナ内のすべてのボックスは上から下に垂直に配置され、これを要素が 1 行を占有すると呼びます。 、垂直方向に隣接する距離 (つまり、マージン) は、2 つのマージンの重ね合わせではなく、それぞれのマージンによって決まります。
例を見てみましょう: 赤の div には 3 つの緑の p 要素が含まれています。
HTML コード:
<div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <p>Sibling 3</p></div>
CSS コード:
.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { background-color: lightgreen; margin: 10px 0; }理想的には、p タグ間のマージンはそれらの合計 (20px) であるべきだと考えられますが、実際にはこれはマージンを折りたたんでいます。
結果は次のとおりです:
これは少し混乱しているようですが、BFC はマージン崩壊を引き起こし、現在はマージン崩壊を解決するために使用されています。しかし、常に 1 つのことを覚えておいてください。要素が同じ BFC 内にある場合のみです。垂直方向のマージン
が異なる BFC に属している場合、マージンの崩壊は発生しないため、マージンの崩壊を防ぐために別の BFC を構築できます。
これで HTML は次のようになります:
<div class="container"> <p>Sibling 1</p> <p>Sibling 2</p> <div class="newBFC"> <p>Sibling 3</p> </div></div>
CSS も変更されました:
.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }p { margin: 10px 0; background-color: lightgreen; }.newBFC { overflow: hidden; /* creates new block formatting context */ }結果は次のようになります:
2 番目の p 要素と 3 番目の p 要素は異なる BFC に属しているため、マージンの崩壊は回避されます。
2浮動要素に対応するには BFC を使用します以下に示すように、コンテナ内に浮動要素が存在するにもかかわらず、コンテナの高さが 0 である状況によく遭遇すると思います:
以下の例を見てください:
HTML:
<div class="container"> <div>Sibling</div> <div>Sibling</div></div>
CSS:
.container { background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }Result:
上記の場合、コンテナには浮動要素が含まれているため、高さはありません。通常、この問題に対する解決策は、疑似要素を使用して明確な修正を実装することですが、フローティング要素に対応できるため、BFC を使用するというより良い解決策が得られました。
コンテナに BFC ルールを形成させます。結果は次のとおりです:
.container { overflow: hidden; /* creates block formatting context */ background-color: green; }.container div { float: left; background-color: lightgreen; margin: 10px; }結果:
3. BFC を使用してテキストの折り返しを防止します ほとんどの場合 (特別な設定なしで) 正確に言えば、場合によっては、テキストはフローティング要素の周囲に回り込みます (図 1 など)。
しかし、これは私たちが期待するものではない場合もあります。私たちが望むのは図 2 です。
多くの場合、誰もが p コンテナに左マージンを強制するために margin-left を使用することを選択するかもしれませんが、その距離はちょうど Floated div の幅ですが、BFC を使用してこの問題をより適切に解決できるようになりました。
まず、テキストの折り返しの原理を理解しましょう:
図 1 では、p 要素全体が実際には上の図の黒い領域にあります。p 要素はフローティング要素の下にあるため、移動していません。しかし実際には、p は行ブロック レベル要素 (インライン テキストに対して) として移動されています。これは、フロート要素を「空にする」必要があるためです。テキストが増加するにつれて、テキストの高さがフローティング要素を超えることになります。水平ではなく、内側の距離をその方向に縮めて、回り込むように見せます。
図に示すように:
この問題を解決する前に、この点に関する W3C 仕様の説明を見てみましょう:
ブロックの書式設定コンテキストでは、各ボックスの左外端がブロックの左端に接触します。包含ブロック (右から左への書式設定の場合、右端が接触します) これは、ボックスが新しいブロック書式設定コンテキストを確立しない限り、フロートが存在する場合にも当てはまります (ただし、ボックスの行ボックスはフロートによって縮小する可能性があります)。この場合、フロートによってボックス自体が狭くなる可能性があります)。
W3C は、ボックスが新しいブロック フォーマット コンテキストを確立しない限り、つまり p の BFC を確立しない限り、この状況に対する解決策を提供します。
結果:
注: この記事は翻訳です
ブログをクリックしてください
原文をクリックしてください
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
