🤖

Block Formatting Context (BFC)

に公開
CSS
bfc
tech

BFC: レイアウトを隔離する単位

BFCの主な性質

BFCを持つ要素では、次の挙動が保証される。

1. 外側の要素と マージンが相殺されない

通常、上下マージンは相殺（margin collapsing）されるが、
BFCの境界をまたぐマージンは相殺されない。

2. float要素を内包できる

floatした子要素の高さが、親要素の高さ計算に含まれる。
いわゆる「clearfix不要」になるケースが多い。

3. 外側のfloatの影響を受けない

BFCを作る要素は、外部のfloatを避けてレイアウトされる。

4. 中のレイアウトは BFC内部だけで完結

BFC内部の要素配置は、外部の要素配置に影響されにくい。

BFCが生成される代表的な条件

以下のいずれかを満たすとBFCが作られる。

  • overflow: hidden | auto | scroll（visible以外）
  • position: absolute | fixed
  • float: left | right
  • display: flow-root
  • display: inline-block
  • display: flex / display: grid（その要素自身）

※ 現代的には display: flow-root が最も意図が明確。

Discussion