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