CSS之BFC_html/css_WEB-ITnose

BFC (ブロック フォーマット コンテキスト、ブロック フォーマット コンテキスト)

BFC 特性を持つ要素は、分離された独立したコンテナーと見なすことができ、コンテナー内の要素は外側の要素のレイアウトに影響を与えません。

CSS3 では、BFC はフロー ルートと呼ばれます。

CSS2.1 には、Normal Flow、Float、Absolute Positioning の 3 つの配置スキームがあります。

(1) BFC をトリガーするにはどうすればよいですか?

次の状況では BFC 環境が作成されます:

(a) 浮動 (要素の浮動小数点が存在しないわけではありません)

(b) 絶対配置要素 (要素の位置は絶対または固定です)

(c) ) 表示は inline-block 、 table-cell、 table-caption、 flex、 inline-flex

(d) オーバーフローは表示されません (hidden、auto、scroll の場合)

(2) の特徴は何ですかBFC? F b (a) BFC は垂直マージンフォールド (つぶれ) を防ぎます。また、同じ BFC の下にない場合はフォールドされません。

(b) BFC は浮動要素に「対応」できます