CSSのブロックフォーマットコンテキストの理解

キーテイクアウト

• ブロックフォーマットコンテキスト（BFC）は、ブロックボックスがレイアウトされるWebページの視覚的なCSSレンダリングの一部です。 「オーバーフロー：スクロール」、「ディスプレイ：フレックス」、「フロート：左」などの特定のCSS条件を追加することで作成できます。
BFCはマージンを崩壊させる可能性があります。つまり、2つの兄弟ボックス間の垂直距離は個々のマージンの合計ではありません。ただし、新しいBFCを作成すると、このマージンの崩壊を防ぐことができます。
• BFCは、フロートを封じ込めるために使用できます。コンテナが要素を浮かべているシナリオでは、BFCを定義することで、これらの要素を封じ込め、ページの通常のフローを維持するのに役立ちます。
BFCは、浮かんだオブジェクトの周りにテキストを包むのを防ぐことができます。段落要素の新しいBFCを確立することにより、コンテナブロックの左端に触れなくなり、浮上要素の周りにテキストが巻き付けられないようにします。
• BFCは、マルチコラムレイアウトにも役立ちます。レイアウトの列に新しいBFCを確立することにより、前の列がいっぱいになった後、常に残りのスペースが残り、最後の列がいくつかのブラウザで次の行にドロップするのを防ぎます。
• ブロックのフォーマットコンテキストは、ブロックボックスがレイアウトされるWebページの視覚的なCSSレンダリングの一部です。それが属するポジショニングスキームは、通常の流れです。 W3Cによると：
• フロート、絶対に配置された要素、インラインブロック、テーブルセル、テーブルキャプション、および「目に見える」以外の「オーバーフロー」を備えた要素（その値がビューポートに伝播された場合を除く）は、新しいブロックフォーマットコンテキストを確立します。

上記の引用は、ブロックのフォーマットコンテキストがどのように形成されるかをほぼ要約しています。しかし、理解しやすい方法でそれを再定義しましょう。ブロックフォーマットコンテキストは、次の条件の少なくとも1つを満たすHTMLボックスです。

フロートの値は

ではありません

位置の値は静的でも相対

でもありません

ディスプレイの値は、テーブルセル、テーブルキャプテン、インラインブロック、フレックス、またはインラインフレックスです

オーバーフローの値は表示されません。
• ブロックのフォーマットコンテキストの作成
• ブロックのフォーマットコンテキストを明示的にトリガーできます。したがって、新しいブロックフォーマットコンテキストを作成したい場合は、上記のCSS条件のいずれかを追加するだけです。 たとえば、
次のHTMLをご覧ください：

オーバーフローなどの必要なCSS条件のいずれかを追加することにより、新しいブロックのフォーマットコンテキストを作成できます。上記の条件のいずれかはブロックのフォーマットコンテキストを作成できますが、次のような他の効果もあります。

• ディスプレイ：テーブルは、応答性の問題を引き起こす可能性があります
• オーバーフロー：スクロールは不要なスクロールバーを表示する場合があります
• フロート：左は要素を左に押し込み、他の要素を巻き付けて
• オーバーフロー：Hiddenはオーバーフローの要素をクリップします

したがって、新しいブロックフォーマットコンテキストを作成するたびに、要件に基づいて最適な条件を選択します。均一性のために、私はオーバーフローを使用しました：この記事に記載されているすべての例に隠されています。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  Some Content here
<span><span><span></div</span>></span></span>

オーバーフロー以外の宣言で自由に遊ぶことができます：隠されています。

ブロックのフォーマットコンテキストでのボックスのアラインメント

w3c仕様の状態：

ブロックのフォーマットコンテキストでは、各ボックスの左外のエッジが含まれるブロックの左端に触れます（右から左のフォーマット、右のエッジタッチの場合）。これは、フロートが存在する場合でも当てはまります（ただし、フロートのためにボックスの

ラインボックスが収縮する可能性があります）、ボックスが新しいブロックフォーマットコンテキストを確立しない限り（この場合、ボックス自体は5月フロートのために狭くなります）。

上記の図でわかるように、単純な単語では、ブロックのフォーマットコンテキストに属するすべてのボックスが左に揃っています（左から右へのフォーマットの場合）。ブロック。最後のボックスでは、左側に浮かんだ要素（茶色）があるにもかかわらず、他の要素（緑）がまだ含むブロックの左マージンに触れることがわかります。これが起こる理由についての原則については、テキストラッピングのセクションで以下で説明します。

ブロックのフォーマットコンテキストにより、マージンの崩壊が発生します

通常の流れでは、ボックスは、含まれるブロックの上部から始まる次々に垂直に敷設されます。 2つの兄弟ボックス間の垂直距離は、両方の兄弟の個々のマージンによって決定されますが、2つのマージンの合計ではありません。 これを理解するために、例を考えてみましょう。

上記の図では、赤いボックス（div）に2つの緑の兄弟（p要素）が含まれる場所で作成されたブロックのフォーマットコンテキストが作成されたと考えています。

および対応するCSSは次のとおりです

理想的には、2人の兄弟間のマージンは、両方の要素のマージンの合計（20px）であるべきでしたが、実際には10pxです。これは崩壊マージンとして知られています。兄弟のマージンが異なる場合、より高いマージンが勝ちます。

CodepenのSitePoint（@SitePoint）のペンovzrerを参照してください。

ブロックフォーマットコンテキストを使用して、マージンの崩壊を防ぐ

これは、ブロックのフォーマットコンテキストがマージンの崩壊を引き起こすことを上記で説明したため、最初は少し混乱するかもしれません。しかし、私たちが心に留めておく必要があることの1つは、隣接するブロックボックス（兄弟）間の垂直マージンが同じブロックフォーマットコンテキストにある場合にのみ崩壊することです。それらが異なるブロックフォーマットコンテキストに属している場合、それらの間のマージンは崩壊しません。したがって、新しいブロックフォーマットコンテキストを作成することにより、マージンの崩壊を防ぐことができます。

以前の例で3番目の兄弟を追加できるように、HTMLは次のようになります。

対応するcssは

である：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  Some Content here
<span><span><span></div</span>></span></span>

結果は上記と同じです。つまり、崩壊があり、3人の兄弟が10pxの垂直距離によって分離されます。これは、3つのPタグすべてが同じブロックフォーマットコンテキストの一部であるために発生します。

<span><span>.container</span> {
</span>  <span>overflow: hidden;
</span><span>}</span>

次に、3番目の兄弟を変更して、新しいブロックのフォーマットコンテキストの一部になります。その後、HTMLは次のようになります

およびcss：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  <span><span><span><p</span>></span>Sibling 1<span><span></p</span>></span>
</span>  <span><span><span><p</span>></span>Sibling 2<span><span></p</span>></span>
</span><span><span><span></div</span>></span></span>

今では、出力に違いがあります：

<span><span>.container</span> {
</span>  <span>background-color: red;
</span>  <span>overflow: hidden; /* creates a block formatting context */
</span><span>}
</span>
<span>p {
</span>  <span>background-color: lightgreen;
</span>  <span>margin: 10px 0;
</span><span>}</span>

2番目と3番目の兄弟は異なるフォーマットコンテキストに属しているため、次のデモで明らかなように、それらの間にマージンの崩壊はありません。

CodepenのSitePoint（@SitePoint）でペンXBVOXPを参照してください ブロックフォーマットコンテキストを使用してフロートを含む

ブロックのフォーマットコンテキストには、フロートを含めることができます。多くの場合、容器が要素を浮かべる状況に遭遇します。その場合、コンテナ要素には高さがなく、その浮遊した子供はページの通常の流れの外側にあります。通常、この問題を解決するために明確な修正を使用していますが、最も人気のある方法は「クリアされた」擬似要素の使用です。ただし、ブロックのフォーマットコンテキストを定義することでこれを達成することもできます。

例を見てみましょう：

CSSを使用して：

上記の場合、容器には高さがなく、浮かんだ子供が含まれていません。この問題を解決するために、オーバーフロー：非表示を追加することにより、コンテナ内に新しいブロックフォーマットコンテキストを確立します。修正されたCSSは次のとおりです

コンテナには浮いている兄弟が含まれ、その高さは子供を含むように拡張され、要素はこのフォーマットコンテキスト内のページの通常のフローに戻ります。

CodepenのSitePoint（@SitePoint）によるブロックフォーマットコンテキストの有無にかかわらずペンフロートを参照してください。ブロックフォーマットコンテキストを使用して、テキストラッピングを防止します

フローティングされたdivの周りのテキストが周囲に巻き付けられることがあります（下の画像の図1のように）が、場合によってはこれは望ましくなく、図2のような外観が必要です。これを解決するには、マージンを使用する場合があります。しかし、ブロックのフォーマットコンテキストでこれを解決することもできます。

最初に、テキストがラップされる理由を理解させてください。このためには、要素が浮かんでいるときにボックスモデルがどのように機能するかを理解する必要があります。これは、ブロックのフォーマットコンテキストでのアラインメントについて議論しながら、以前に残した部分です。以下の図の図1で何が起こっているのかを理解しましょう：

図のhtmlは、次のように想定できます 上記の図の黒い領域全体は、P要素を示します。ご覧のとおり、P要素はシフトしませんが、浮かんだ要素の下にあります。 P要素のラインボックス（テキストの行を参照）はシフトを受けます。したがって、ラインボックスは水平方向に狭くなり、浮遊要素のためのスペースを作ります。

テキストが増加すると、ラインボックスがシフトする必要がなくなるため、図1のような条件が表示されるため、最終的に浮遊要素の下で包みます。これは、フローリングされた要素が存在している場合でも、段落が含まれるボックスの左端に触れる方法と、フローティングされた要素に対応するためにラインボックスが狭くなる方法を説明しています。

P要素全体をシフトできれば、このラッピングの問題は解決されます。

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  Some Content here
<span><span><span></div</span>></span></span>

解決策に行く前に、W3C仕様に言っていることをもう一度思い出しましょう。

ブロックのフォーマットコンテキストでは、各ボックスの左外のエッジが含まれるブロックの左端に触れます（右から左のフォーマット、右のエッジタッチの場合）。これは、フロートが存在する場合でも当てはまります（ただし、フロートのためにボックスの

ラインボックス

が収縮する可能性があります）、ボックスが新しいブロックフォーマットコンテキストを確立しない限り（この場合、ボックス自体は

5月

フロートのために狭くなります）。

これによれば、P要素が新しいブロックフォーマットコンテキストを確立する場合、コンテナブロックの左端に触れなくなります。これは、Overflow：Hidden in the P要素を追加するだけで実現できます。この方法で、新しいブロックフォーマットコンテキストを作成すると、浮遊オブジェクトにテキストを包む問題が解決します。

CodepenのSitePoint（@SitePoint）によるテキストラップを防ぐブロックフォーマットコンテキストを参照してください。マルチコラムレイアウトでブロックフォーマットコンテキストを使用している

コンテナの全幅に及ぶマルチカラムレイアウトを作成する場合、最後の列は一部のブラウザで次の行にドロップすることがあります。これは、ブラウザが列の幅から丸くなっており、総幅がコンテナの幅よりも大きくなるために発生する可能性があります。ただし、レイアウトの列に新しいブロックフォーマットコンテキストを確立する場合、前の列が満たされた後、常に残りのスペースが残っています。

3列のマルチコラムレイアウトの例を使用してみましょう：

これがHTML：

です

およびcss：

<span><span><span><div</span> class<span>="container"</span>></span>
</span>  Some Content here
<span><span><span></div</span>></span></span>

結果はCodepenデモ：

<span><span>.container</span> {
</span>  <span>overflow: hidden;
</span><span>}</span>

です

ブロックフォーマットコンテキストを使用してペンを参照して、CodepenでSitePoint（@SitePoint）で最終列「FIT」を作成します。

容器の幅がわずかに変化しても、レイアウトは壊れません。もちろん、これは必ずしもマルチコラムレイアウトに適したオプションではありませんが、最終列のドロップの問題を防ぐ方法の1つです。 FlexBoxは、このような場合にはおそらくより良い解決策になるでしょうが、これはこのような状況下で要素がどのように振る舞うかを説明するのに役立つはずです。

結論

この投稿が、ブロックのフォーマットコンテキストの関連性と、それらがページ上の要素の視覚的位置にどのように影響するかを示していることを願っています。実際のケースでの使用を示す例は、それらをもう少し明確にするはずです。

追加するものがある場合は、コメントでお知らせください。そして、より深く行きたい場合は、W3Cのトピックのより詳細な議論を必ず確認してください。 CSSのブロックフォーマットコンテキストに関するよくある質問（FAQ）

CSSのブロックフォーマットコンテキストの重要性は何ですか？

ブロックフォーマットコンテキスト（BFC）は、Webページ上の要素のレイアウトを制御するCSSの基本的な概念です。それは、特に複雑なレイアウトで、要素の位置とスタイリングにおいて重要な役割を果たしています。 BFCは、フロート、インラインブロック、テーブルを含むドキュメントのセクションを分離するのに役立ち、予期しない要素の重複を防ぐことができます。 BFCSを理解することで、開発者がより堅牢で予測可能なデザインを作成するのに役立ちます。

ブロックのフォーマットコンテキストは、フローティング要素のレイアウトにどのように影響しますか？それらは、BFCの外側の要素のレイアウトに影響しません。これは、テキストや他の要素が浮かんだ要素の周りに包まれないようにする場合に特に便利です。新しいBFCを作成することにより、浮上した要素が他の要素の位置を妨げないようにすることができます。

新しいブロックフォーマットコンテキストを作成するにはどうすればよいですか？

CSSで新しいBFCを確立する方法はいくつかあります。最も一般的な方法のいくつかには、CSSプロパティの「ディスプレイ」を「フロールート」、「フレックス」、または「グリッド」に設定する、または「目に見える」以外のものに「オーバーフロー」を設定することが含まれます。新しいBFCを作成するその他のプロパティには、その値が「レイアウト」、「ペイント」、またはそれらのいずれかを含む複合値の場合、「conter」、および他の値がある場合は「列 - カウント」または「列幅」が含まれます。 「auto」よりも。

ブロックフォーマットコンテキストがマージンに与える影響は何ですか？

BFCの重要な特徴の1つは、マージンの崩壊を防ぐことです。 CSSでは、隣接する垂直マージンは、個々のマージンの最大値である単一のマージンに崩壊することがあります。ただし、BFCでは、最初の子供の上部マージンと最後の子供の下部マージンは、BFC自体のマージンと崩壊しません。これは、要素の間隔を制御するのに役立ちます。

ブロックのフォーマットコンテキストがオーバーフローをどのように処理しますか？

要素のコンテンツがボックスをオーバーフルすると、BFCはこのオーバーフローを管理するのに役立ちます。要素が新しいBFCを作成する場合、あらゆるオーバーフローがこぼれるのではなく、BFCにクリップされます。これは、「自動」、「スクロール」、「非表示」などの値を使用して、「オーバーフロー」プロパティを使用して制御できます。 🎜> CSSの「クリア」プロパティは、浮上要素の流れを制御するために使用されます。 BFCでは、「クリア」プロパティは同じBFC内の要素のみに影響します。これは、「クリア」セットを備えた要素が親BFCのフロートの下に移動することはなく、独自のBFC内にフロートのみであることを意味します。互いにネストされます。各BFCは、親と兄弟のBFCとは独立して動作します。これは、フロート、マージン、およびその他のレイアウト機能が各BFC内に含まれており、他のBFCの要素に影響しないことを意味します。 CSSのフレックスレイアウトとグリッドレイアウトは、新しいBFCを自動的に作成します。これは、彼らがフロートを封じ込め、他のBFCと同じ方法でマージンの崩壊とオーバーフローを防ぐことを意味します。したがって、BFCSを理解することは、フレックスレイアウトとグリッドレイアウトの動作を理解するのに役立ちます。 、しかし、それらは特定の状況で相互作用することができます。たとえば、新しいスタッキングコンテキストは、「相対」または「絶対」の「位置」値、および「自動」以外の「Z-Index」値を持つ要素によって作成できます。これは、特にフロートとオーバーラップに関連して、BFCの要素のレンダリングに影響を与える可能性があります。

ブロックのフォーマットコンテキストに関するブラウザの互換性の問題はありますか？

ほとんどの最新のブラウザはBFCを正しくかつ一貫して処理します。ただし、古いブラウザー、特にインターネットエクスプローラーにはいくつかの違いがあるかもしれません。複数のブラウザでレイアウトをテストして、予想どおりに動作するようにすることをお勧めします。

以上がCSSのブロックフォーマットコンテキストの理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。