BFCとスタッキングコンテキストの違いは何ですか？

Question

これは私をとても混乱させます。

Block_Formatting_Contextとstacking_contextの違いは何ですか？

ありがとうございました！

Answer 1

ブロック書式設定コンテキストは、WebページのビジュアルCSSレンダリングの一部です。ブロックボックスのレイアウトが発生し、浮動小数点数が相互に作用する領域です。

詳細を読むhttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

そして

スタッキングコンテクストがビューポートに対向されているものとするユーザに仮想のZ軸相対沿ってHTML要素の三次元概念でありますまたはウェブページ。 HTML要素は、要素の属性に基づいてこのスペースを優先順位で占有します。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context

Answer 2

stacking contextは（下から上へ）7つの異なる層から成る：

もっと読み取るスタッキングコンテキストを確立

• 背景と要素の境界
• 負のスタックレベルを持つ子孫のコンテキストを積み重ねる
• 通常フローのブロックレベルの子孫
• が子孫とその内容
通常の流れで
• インラインレベルの子孫z屈折率の正のスタックレベルで自動または子孫の0
• スタッキングコンテクストで

A

配置子孫を浮かべ新しいblock formatting contextは、overflow: scroll, overflow: hidden, display: flex, float: left, or display: tableのような必要なCSS条件のいずれかをコンテナに追加することで作成できます。上記の条件のいずれかがblock formatting contextを作成することができますが、また、のようないくつかの他の影響があるでしょう：

• display：応答性の問題を作成することがあり、テーブル
• overflow：スクロールが不要なスクロールバー
• floatを表示することがあります。 leftは要素を左にプッシュし、他の要素はラップします。
• overflow：オーバーフローした要素を隠すことになります。