ブロック整形コンテキストは、ウェブページにおける CSS の視覚的なレンダリングの一部です。ブロックボックスのレイアウトが行われ、浮動が他の要素と相互作用する領域です。
ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。
- 文書のルート要素 (
<html>
) - 浮動要素 (
float
がnone
以外である要素) - 絶対位置指定の要素 (
position
がabsolute
またはfixed
である要素) - インラインブロック (
display
: inline-block
である要素) - 表のセル (
display
: table-cell
を持つ要素。これは HTML の表のセルの既定値です) - 表のキャプション (
display
: table-caption
を持つ要素。HTMLの、表のキャプションの既定値です) display
: table
,table-row
,table-row-group
,table-header-group
,table-footer-group
(つまりそれぞれ HTML の表、表の行、表の本体、表のヘッダー、表のフッターの既定値),inline-table
のついた要素によって暗黙的に生成された無名の表のセル。overflow
の値がvisible
以外であるブロック要素display
: flow-root
contain
: layout
,content
,paint
の付いた要素- フレックスアイテム (
display
: flex
またはinline-flex
である要素の直接の子要素) - グリッドアイテム (
display
: grid
またはinline-grid
である要素の直接の子要素) - 段組みコンテナー (
column-count
またはcolumn-width
がauto
ではない要素、column-count: 1
の要素も含む) column-span
: all
は、column-span: all
の要素が段組みコンテナーに含まれていなくても、常に新たな整形コンテキストを生成します (仕様変更, Chrome bug)。
ブロック整形コンテキストは、それを生成する要素の内側にあるすべてのものを含みます。
ブロック整形コンテキストは、浮動要素の配置設定 (float
を参照) と解除 (clear
を参照) にとって重要です。浮動要素の配置設定と解除の規則は、同一のブロック整形コンテキスト内にあるものにだけ適用されます。浮動要素は他のブロック整形コンテキストの内容のレイアウトには影響せず、 clear は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。
例
浮動コンテンツとその横のコンテンツの高さを同じにする
いくつかの例を見て、新しいブロック整形コンテキスト (BFC) を生成することによる効果を確認してみましょう。
以下の例では、 <div>
に border
が適用されている中に浮動要素があります。その <div>
の内容は、浮動要素の横にあります。浮動要素の内容がその横のコンテンツよりも高いので、 <div>
の境界は浮動要素を突き抜けてしまいます。フロー内とフローの外の要素のガイドで説明している通り、浮動要素はフローから出るので、 <div>
の background
および border
はコンテンツのみを含みますが、浮動要素は含みません。
HTML
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
CSS
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
overflow: auto;
の使用
新しいブロック整形コンテキスト (BFC) を生成すると、浮動要素を含むようになります。以前からよくある方法は、 overflow: auto
を設定するか、初期値である overflow: visible
以外の値を設定するものです。
CSS
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
overflow: auto
を設定することで浮動要素を含む新しい BFC を生成しました。 <div>
はレイアウトの中のミニレイアウトになりました。すべての子要素はその中に含まれます。
overflow
を使用して新しい BFC を生成することの問題は、 overflow
プロパティがブラウザーにあふれた内容をどのように扱いたいかを伝えるためのものであることです。このプロパティを純粋に使用して BFC を作成すると、不要なスクロールバーやクリップされた影が表示される場合があります。また、この目的で overflow
を使用した理由が明らかではない可能性があるため、将来の開発者にとっては読みにくくなる可能性があります。 overflow
を使用する場合、コードに説明するためのコメントをすることをお勧めします。
display: flow-root
の使用
A newer value of display
lets us create a new BFC without any other potentially problematic side-effects. Using display: flow-root
on the containing block creates a new BFC .
CSS
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
display: flow-root
}
.float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
With display: flow-root;
on the <div>
, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.
The value name of flow-root
makes sense when you understand you are creating something that acts like the root
element (<html>
element in browser) in terms of how it creates a new context for the flow layout inside it.
Note: display: flow-root;
is not supported by Safari.
マージンの相殺
Creating a new BFC to avoid the margin collapsing between two neighbor div:
HTML
<div class="blue"></div>
<div class="red-outer">
<div class="red-inner">red inner</div>
</div>
CSS
.blue, .red-inner {
height: 50px;
margin: 10px 0;
}
.blue {
background: blue;
}
.red-outer {
overflow: hidden;
background: red;
}