BFC_html/css_WEB-ITnose とは

BFC定義
BFC（Block formatting context）は、直訳すると「ブロックレベルの書式設定コンテキスト」となります。これは、ブロック レベル ボックスのみが参加する独立したレンダリング領域であり、内部のブロック レベル ボックスのレイアウト方法を規定し、この領域の外側とは何の関係もありません。
BFC レイアウト ルール:
内部ボックスは垂直方向に次々と配置されます。ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは、各要素のマージン ボックスの左側が、それを含むブロック境界ボックスの左側と接触します (左から右への書式設定の場合はその逆)。 これは浮きがあった場合にも当てはまります。 BFC エリアはフロート ボックスと重なりません。 BFC はページ上で分離された独立したコンテナーであり、コンテナー内の子要素は外部の要素には影響しません。およびその逆。 BFC の高さを計算するとき、浮動要素も計算に参加します。
ルート要素

float 属性は none ではありません

位置は絶対または固定です

表示は inline-block、table-です。 cell、table-caption、flex、inline-flex

オーバーフローは表示されません

BFC は、ページ上で分離された独立したコンテナーであり、コンテナー内の子要素は、表面上の要素には影響しません。およびその逆。