CSS BFC(ブロックフォーマットコンテキスト)_html/css_WEB-ITnose

BFC
の定義は、W3C CSS 2.1 仕様の概念であり、要素がそのコンテンツをどのように配置するか、また他の要素との関係や相互作用を決定します。
ブロック書式設定コンテキストが作成された要素には、その子要素が次々と配置されます。それらの垂直方向の開始点は、それを含むブロックの上部であり、2 つの隣接する要素間の垂直方向の距離は、「margin」プロパティによって決定されます。ブロック フォーマット コンテキスト内の隣接するブロック レベル要素の垂直マージンが折りたたまれます。

ブロック書式設定コンテキストでは、浮動小数点が存在する場合でも（要素のコンテンツがこの要素が新しいブロック フォーマット コンテキストも作成しない限り、領域は浮動および圧縮の影響を受けます。

BFC とは何ですか?

視覚的なレイアウトに関しては、ブロック フォーマット コンテキストは、HTML 要素が特定のルールに従ってレイアウトされる環境を提供します。ある環境内の要素は、他の環境のレイアウトに影響を与えません。たとえば、浮動要素は BFC を形成します。浮動要素内のサブ要素は主に浮動要素の影響を受け、2 つの浮動要素は互いに影響しません。これは、BFC が独立した行政単位であるという考えに似ています。

BFCの作り方

floatの値はnoneではありません。

オーバーフローの値は表示されません。

displayの値はtable-cell、table-caption、inline-blockのいずれかです。

位置の値は相対的でも静的でもありません。

BFC の役割

1. 浮動要素と重ならないようにします

浮動要素の後に非浮動要素が続く場合、これが多くのアダプティブ 2 列レイアウトで発生します。たとえば、下の図の効果は、例を参照してください

rrree

2. 要素の内部 float をクリアします

子要素の float をクリアするには、親要素を BFC に設定するだけです。親要素に overflow: hidden を設定することです。スタイルについては、IE6 (IE Haslayout) の場合は、zoom:1 を追加するだけです。

3. ネストされた要素のマージン崩壊の問題の解決策

BFC の定義によれば、2 つの要素が同じ BFC に属する場合にのみ、2 つの要素の垂直マージンの重なりが可能です。これには、隣接する要素とネストされた要素が含まれます。マージンの間に障害物 (境界線、空ではないコンテンツ、パディングなど) がない限り、マージンのオーバーラップが発生します。

したがって、マージンの重複の問題を解決するには、それらを同じ BFC 内に配置しないようにするだけです。ただし、2 つの隣接する要素の場合、シェルを追加する必要はありませんが、ネストされた場合は非常に簡単です。必要に応じて、親要素を BFC に設定するだけです。こうすることで、子要素の余白が親要素の余白と重なりません。