CSSにおけるBFC(ブロックレベル可視化コンテキスト)の理解[訳]

冒頭

float要素、positionがabsolute、inline-block、table-cellまたはtable-captionの要素、overflow属性がvisibleでない要素など、いくつかの要素は、新しいブロックレベルのフォーマットコンテキストを確立します.
上記の定義は、ブロックレベルフォーマットコンテキスト(Block Formatting Context)がどのように形成されているかを詳細に説明しており、便宜上、BFCで置き換えられている.ここでは、BFCもHTMLの1つのボックス(見えないだけ)であり、少なくとも以下の条件の1つを満たしてこそBFCを形成することができるという簡単な方法で再定義してみましょう.

float属性はnone.

ではない

position属性がstatic relative.でない

displayプロパティは、table-cell,table-caption,inline-block,flex,or inline-flex.

のいずれかです.

overflowプロパティはvisible.

ではありません.

BFCを構築しましょう

HTMLコードは次のとおりです.

<div class="container">
  Some Content here
</div>

overflow: scroll, overflow: hidden, display: flex, float: left, or display: table.のようなCSSを用いてcontainer容器に上記の条件を付加することができ、これらの条件はいずれもBFCを形成することができるが、それらはそれぞれ異なる表現を持っている.

display: table :

overflow: scroll :

float: left: ，

overflow: hidden:

このように見ると、BFCを構築する最善の方法はoverflow:hiddenである.

.container { overflow: hidden; }

BFCでは、ブロックレベル要素はどのようにレイアウトされていますか?

W 3 C仕様は以下の通りである.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).bfcbfc.jpg
簡単に言えば、上の図のBFCに属するboxはすべてデフォルトで左揃えで、それらの左側の距離は容器containerの左側に触れることができます.最後のboxは、フローティングであるにもかかわらず、この原則に従っています.(BFCのフローティングは以下で説明します)－ ，BFC ？ － ，

1.BFCによるMargin Collapseの消去

通常、1つの容器内のすべてのboxは、上から下へ順に垂直に配列されます.すなわち、私たちが言った要素が1行を占め、垂直に隣接する距離(すなわちmargin)を切るのは、2つのmarginの重ね合わせではなく、それぞれのmarginによって決まります.
例を見てみましょう.赤いdivには緑のp要素が3つ含まれています.
HTMLコード:

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <p>Sibling 3</p>
</div>

CSSコード:

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }

p { background-color: lightgreen; margin: 10px 0; }

理想的には、pタグ間のmarginはそれらの和(20 px)であるべきだと考えられるが、実際には10 pxである.これは実はcollapsing marginsです.
結果は次のとおりです.
これは少し困惑しているようで、BFCはmargin collapseを招いて、今またそれを使ってmargin cllapseを解決します.しかし、要素が同じBFCにある場合にのみ、垂直方向のmarginがclollpaseになることを常に覚えておいてください.それらが異なるBFCに属する場合、margin collapseは存在しない.したがって、margin collpaseの発生を阻止するためにBFCを再構築することができます.
HTMLは次のようになります.

<div class="container">
  <p>Sibling 1</p>
  <p>Sibling 2</p>
  <div class="newBFC">
    <p>Sibling 3</p>
  </div>
</div>

CSSも変わりました.

.container { background-color: red; overflow: hidden; /* creates a block formatting context */ }

p { margin: 10px 0; background-color: lightgreen; }

.newBFC { overflow: hidden; /* creates new block formatting context */ }

現在の結果は次のとおりです.
2番目のp元素と3番目のp元素は異なるBFCに属するため、margin collapseは回避する.

2.BFCによるフローティングエレメントの収容

容器に浮動要素があることはよくあると思いますが、この容器の高さは0のシーンで、以下の図になります.
次の例を見てください.
HTML:

<div class="container">
  <div>Sibling</div>
  <div>Sibling</div>
</div>  

CSS:

.container { background-color: green; }

.container div { float: left; background-color: lightgreen; margin: 10px; }

結果:
上の場合、containerにはフローティング要素が含まれているため、高さはありません.通常、私たちがこの問題を解決する方法は、clear fixを実現するために偽の要素を利用することですが、今ではBFCを利用するより良い解決策があります.それはフローティング要素を収容するのに十分だからです.次にcontainerにBFC規則を形成させ、結果は以下の通りである.

.container { overflow: hidden; /* creates block formatting context */ background-color: green; }

.container div { float: left; background-color: lightgreen; margin: 10px; }

結果:

3.BFCによる改行阻止

場合によっては、多くの場合(特別な設定がない場合)、テキストはフローティング要素(Figure 1など)を囲んでいますが、これは私たちが望んでいない場合があります.私たちが望んでいるのはFigure 2です.
多くの場合、margin-leftを利用してpの容器に左の距離を強制することを選択する可能性がありますが、距離はFloated divの幅にぴったりですが、BFCを利用してこの問題をよりよく解決することができます.
まず、テキストの改行の原理を理解しましょう.
Figure 1では、p要素全体が実際には上図の黒い領域にあり、p要素がフローティング要素の下に移動していないためです.しかし、実際にはpは行ブロックレベルの要素(行内のテキストに対して)として移動し、float要素’騰’の位置を与えるため、テキストの増加に伴い、テキストの高さがフローティング要素を超える部分は水平方向に内部距離を縮めることがなく、周囲のように見える.
図:
この問題を解決する前に、W 3 Cの仕様の説明を見てみましょう.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
W 3 Cは、このような状況の解決策を提供する:unless the box establishes a new block formatting context、すなわちpのためにBFCを確立する.
結果: ： blog原文を押してください