CSSレイアウトとブロックフォーマットコンテキストを理解する

まず、この記事はWeChatのパブリックアカウント「Front-end New Vision」から転載されていることを宣言します。ブロガーは当時読んだことで多くの恩恵を受けたので、将来の使用のためにブログに記録したいと思います。侵害またはその他の問題がある場合は、ブロガーに連絡して削除してください。ブロガーQQ：1105810790

HTMLレイアウトとCSS書き込みを行うときに、次のような問題が発生しましたか。

子要素がドキュメントフローから離れるように設定された後、親要素はそれを完全にラップできません。
子要素が2列のレイアウトを実現するためにフロートすると、別の子要素がフローティングの子要素
とオーバーラップし
ます。垂直マージンはオーバーラップします。 。
通常、ブロックレベルのフォーマットコンテキスト（BFC）を使用して解決できます。

BFCとは何ですか？

ブロックフォーマットコンテキスト（BFC）は、WebページのビジュアルCSSレンダリングの一部であり、ブロックボックスのレイアウトプロセスが発生する領域であり、フローティング要素が他の要素と相互作用する領域でもあります。

FC（フォーマットコンテキスト）は、文字通り、ページ内のレンダリング領域であるフォーマットコンテキストに変換されます。子要素のレイアウト方法、および他の要素との関係と機能を決定する一連のレンダリングルールがあります。

BFCは、ページ上の分離された独立したコンテナです。コンテナ内の子要素は外部要素に影響を与えず、コンテナ要素は兄弟要素のレイアウトに影響を与えません。

どのような状況でBFCが作成されますか？

ルート要素またはルート要素を含む要素
浮動要素（要素の浮動小数点数はなしではありません）
絶対位置要素（要素の位置は絶対または固定）
インラインブロック要素（要素の表示はインラインブロックです）
テーブルセル（要素の表示はテーブルです-cell、HTMLテーブルセルのデフォルトはこの値）
テーブルタイトル（要素の表示はtable-caption、HTMLテーブルタイトルのデフォルトはこの値）
匿名のテーブルセル要素（要素の表示はtable、table-row、table -row -group、table-header-group、table-footer-group（それぞれ、HTML table、row、tbody、thead、tfootのデフォルト属性）またはinline-table）
オーバーフロー値が
表示されないブロック要素表示値はフローです-ルート要素（新しいメソッド、記事の最後に記載）に
は、値がレイアウト、コンテンツ、または厳密な
弾性要素（ディスプレイはフレックスまたはインラインフレックス要素の直接の子）
グリッド要素（ディスプレイはグリッドまたはインライングリッド要素直接子要素）
複数列コンテナ（要素の列数または列幅は自動ではなく、列数は1です）
列スパンがすべての要素は常に新しいBFCを作成します。要素が複数列のコンテナーにラップされていない場合でも。

一般的なアプリケーションシナリオ

親要素にフローティング要素を含める

次の例では、フローティングコンテンツと親要素を同じ高さにする方法を説明し、フローティングが
htmlに悪影響を与えることを明確にします。

<div class="outer">
  <div class="float">I am a floated element.</div>
  I am text inside the outer box.
</div>

css

.outer {
    
    
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
    
    
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

テキストの折り返し効果を実現するには、左側のテキストを左にフロートするように設定するのが一般的です。テキストが十分に長い場合、次の効果が見られ、親要素は子要素を完全に折り返すことができます。

ただし、実際には、float内のテキストはドキュメントから分離されています。ドキュメントのフローが少なすぎると、floating要素が親要素のエッジからオーバーフローします。

このとき、overflow：autoを親要素に設定するか、非表示のデフォルト値以外の有効な値を設定すると、BFCを作成してこの問題を解決し、親要素に浮動要素を含めることができます。

.outer {
    
    
  overflow: auto;
}

BFCは垂直マージンのオーバーラップを防ぎます

マージンフォールディングのルールは次のとおりです。2つのブロックレベルの要素が隣接し、同じブロックレベルのフォーマットコンテキストにある場合、それらの垂直マージンは
htnlとオーバーラップします。

<div class="outer">
  <p>I am paragraph one and I have a margin top and bottom of 20px</p>
  <p>I am paragraph two and I have a margin top and bottom of 20px</p>
</div>

css

.outer {
    
    
  background-color: #ccc;
  margin: 0 0 40px 0;
}

p {
    
    
  padding: 0;
  margin: 20px 0 20px 0;
  background-color: rgb(233,78,119);
  color: #fff;
}

p要素のエッジと外側のdivのマージンの間にコンテンツがないため、2つがマージされ、段落はボックスの上部と下部と同じ高さになります。段落の上下に灰色は表示されません。次の図に示すように：

親要素がBFCに設定されている場合、親要素と子要素pの重複領域はマージされなくなります

.outer {
    
    
  background-color: #ccc;
  margin: 0 0 40px 0;
  overflow: auto;
}

BFCはテキストの折り返しを防ぎます

上記の例のテキスト折り返し効果のレイアウトとスタイルは、
HTMLと同じです。

<div class="outer">
  <div class="float">I am a floated element.</div>
  <div class="text">I am text...</div>
</div>

css

.float{
    
    
    float: left;
}

このとき、右側のテキストをフローティングテキストボックスで囲みたくない場合は、左側のdivをfloatに設定すると、右側のdivをBFCにして、2つの兄弟のdivをそれぞれから分離することができます。他のテキストの折り返し効果を削除するために、相互に影響を与えません。

.text {
    
    
  overflow: auto;
}

BFCを作成する新しい方法

BFCを作成する多くの方法は通常、いくつかの副作用をもたらします。オーバーフロープロパティはこれまでのところ最も安全であるように見えますが、場合によってはスクロールバーが必要ありません。このとき、スクロールバーはこの方法の副作用になります。そのため、ディスプレイには新しい属性flow-rootがあり、BFCを作成する必要があるすべてのシナリオで使用でき、副作用は発生しません。

フロールートブラウザの互換性：

この値のブラウザサポートは制限されています。フレックスまたはグリッドレイアウトをサポートしないブラウザでフォールバックを作成する場合は、フローティング要素を防ぐためにBFCの悪影響を理解する必要があります。

繰り返しになりますが、この記事はWeChatのパブリックアカウント「Front-endNew Vision」から複製されたものです。ブロガーは当時読んだことで多くの恩恵を受けたので、将来の使用のためにブログに記録したいと思います。違反がある場合はまたはその他の問題については、ブロガーに連絡して削除してください。ブロガーQQ：1105810790