BFCとは?BFCの原理と作用?

原文:https://www.cnblogs.com/libin-1/p/7098468.htmlおよびhttps://www.jianshu.com/p/acf76871d259
BFC定義
1つのWebページのCSSレンダリングでは、ブロックレベルフォーマットコンテキスト(Block Fromatting Context)はブロックレベルボックスに従ってレイアウトされます.W 3 CのBFCの定義は以下の通りである.

           ，          （   inline-blocks, table-cells,   table-captions），
  overflow   “visiable”     ，            BFC（       ）。

1つのHTML要素がBFCを作成するには、1、floatの値がnoneではないという条件を1つ以上満たす必要があります.2、positionの値はstaticまたはrelativeではありません.3、displayの値はinline-block、table-cell、flex、table-captionまたはinline-flex 4、overflowの値はvisibleではありません
BFCは独立したレイアウト環境であり、要素レイアウトは外部の影響を受けず、1つのBFCではブロックボックスと行ボックス(行ボックスは1行のすべてのインライン要素からなる)が親要素の枠線に垂直に配列されます.
BFCの役割
1.内部フローティングのクリア
この問題は、サブエレメントにフローティングを設定すると、親エレメントが高度に陥没し、親エレメントの高さが0になるというレイアウトでよく発生します.この問題を解決するには,親要素をBFCに変えるだけでよい.親要素にoverflow:hiddenを設定するのが一般的です.
2.垂直margin連結
CSSでは、隣接する2つのボックスの外側距離を1つの個別の外側距離に結合することができる.このような外距離を結合する方法を折り畳みと呼び、したがって、結合された外距離を折り畳み外距離と呼ぶ.折りたたみの結果:隣接する2つの外側距離が正数の場合、折りたたみの結果は両者の間の大きな値です.2つの隣接する外距離がいずれも負数の場合,折り畳み結果は両者の絶対値の大きな値である.2つの外側の距離が正と負の場合、折りたたみ結果は両者の加算和である.これもBFCで解決できる.原理については前文で述べた.
3.適応2列レイアウトの作成
多くのサイトでは、左画像+右文字の2つの欄構造がよく見られます.