この記事は翻訳作業中です。
ブロック整形コンテキストは、 CSS の視覚的なウェブページ生成の一部です。その中でブロックボックスのレイアウトが行われ、フロート同士が相互に作用します。
ブロック整形コンテキストは、以下のうちの少なくとも一つから生成されます。
- ルート要素もしくはそれを含むもの
- 浮動要素 (
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,strictの付いた要素- フレックスアイテム (
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 は同じブロック整形コンテキスト内の以前の浮動要素のみを解除します。マージンの相殺も、同じブロック整形コンテキストに所属するブロック同士でしか発生しません。
例
浮動コンテンツと同じ高さの添付コンテンツの作成
Let's have a look at a couple of these in order to see the effect creating a new BFC.
In the example below, we have a floated element inside a <div> with a border applied. The content of that <div> has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the <div> now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flow so the background and border of the <div> only contain the content and not the float.
Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto or set other values than the initial value of overflow: visible.
Setting overflow: auto created a new BFC containing the float. Our <div> now becomes a mini-layout inside our layout. Any child element will be contained inside it.
The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.
マージンの相殺
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;
}
結果
display: flow-root の使用
A newer value of display gives us the ability to create a new BFC without any other potentially problematic side-effects. Using display: flow-root on the containing block will create a new BFC .
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.