ブロック整形コンテキストは、ウェブページにおける 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-rootcontain: 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
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
.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
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
.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;
}