CSS之BFC(ブロックフォーマットコンテキスト)

私は以前、BFC が何なのか知りませんでした。今日読んでから、以前はよく目にしていたことに気づきましたが、専門的な名前は知らなかったのです。クロージャや継承と同じように、以前はよく使われていましたが、私は知らなかったので、今日は CSS の位​​置決めの BFC について説明します。

BFC はフロートのクリアに関連しているので、フロートをクリアする方法について説明します。フロートをクリアするには主に 2 つの方法があります:

①clear 属性を使用してフロートをクリアする

②親コンテナを BFC 形式にする

について説明する前に。 BCF、私たちが言いたいのは、要素のレイアウトを制御するために通常使用する 3 つの主要な配置スキームがあるということです: 通常のフロー、フロート、および絶対配置です

***通常のフロー Flow)

通常のフローでは、要素はレイアウトされますこのプロセスでは、インライン要素は行がいっぱいになるまで水平に配置されてから折り返され、ブロックレベルの要素は完全にレンダリングされます。特に指定がない限り、すべての要素は の新しい行になります。デフォルトは通常のフロー位置です。通常のフロー内の要素の位置は、HTML ドキュメント内の要素の位置によって決定されるとも言えます。

***フロート

フロートレイアウトでは、要素はまず通常のフローの位置に従って表示され、その後フロートの方向に従ってできるだけ左または右にオフセットされます。

***絶対配置

絶対配置レイアウトでは、要素は全体として通常のフローから分離されるため、絶対配置要素はその兄弟要素に影響を与えません（一方、フローティング要素は兄弟要素に影響します）。要素 特定の位置は絶対位置決めの座標によって決まります。

BFCは通常のストリームに属するため、兄弟要素には影響しません。

&&--BFC の定義--&&

BFC は、ボックス要素をレイアウトするときに、特定のルールに従ったレイアウトが他の環境のレイアウトに影響を与えない環境を提供します。たとえば、浮動要素は BFC を形成します。浮動要素内のサブ要素は主に浮動要素の影響を受け、2 つの浮動要素は相互に影響を及ぼしません。つまり、要素が BFC になるための条件を満たしている場合、要素の内部要素のレイアウトと配置は相互に影響を与えず (内部ボックスが新しい BFC を作成しない限り)、孤立した独立したコンテナーになります。 。

&&--BFC とは正確には何ですか--&&

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

&&--BFCの作り方--&&

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

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

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

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

⑤css3のフレックスボックス

&&--BFCの役割--&&

①フローティング要素（クリアフロート）が含まれています

BFCは、子要素の状況に応じて高さを調整します。この機能は、オーバーフローを使用することです。親要素 /auto/scroll に非表示、float:left/right スタイルはフローティング要素を閉じることができます

② フローティング要素でカバーされない
フローティング要素は兄弟要素の存在を無視し、兄弟要素の上にカバーします これは可能です。この状況は兄弟要素に BFC を作成することで回避できます

&&--BFC には 3 つの主な機能があります--&&

①BFC はマージンの折り曲げを防止します
実際の開発では、接続された 2 つの p の垂直方向のマージンが重なり合います。この場合、BFC の機能の 1 つを使用して余白が重ならないようにすることができます。親要素と子要素のマージンの崩れを防ぎます。2 つのブロック レベル要素が隣接し、同じブロック レベルの書式設定コンテキスト内にある場合にのみ、それらの間の垂直マージンが重なり合います。つまり、2 つのブロック レベル要素が隣接している場合でも、それらが同じブロック レベルの書式設定コンテキストにない場合、それらの余白は崩れません。同時に、BFC 要素には、その子要素と折り畳まれたマージンがありません。

②BFC には浮動要素を含めることができます
これはまさに、overflow: hidden メソッドと overflow: auto メソッドを使用して上記の浮動小数点を閉じる原理です。overflow: hidden または overflow: auto を使用して、浮動要素の親要素の BFC 機能をトリガーします。浮動要素、閉じた浮動小数点を含めることができるようにします。

W3C の原文は「ブロック フォーマット コンテキスト ルートの 'Auto' heights」です。これは、子要素にフローティング要素が含まれている場合でも、BFC が子要素の状況に応じて高さを自動的に調整することを意味します。

ただし、IE6-7 は W3C の BFC をサポートせず、独自の hasLayout を使用します。パフォーマンスの点では、hasLayout 自体に多くの問題があり、IE6 ～ 7 で一連のバグが発生することを除けば、BFC と非常によく似ています。 hasLayout をトリガーするための条件は、BFC をトリガーする場合と似ています。具体的な状況については、Kayo が別の記事で紹介する予定です。ここで、Kayo は、hasLayout をトリガーするために IE 固有の CSS 属性zoom: 1 を設定することを推奨しています。値「1」は、要素の実際のサイズを使用することを意味します。 hasLayout を指定せずに hasLayout をトリガーできます。これは要素に他の影響を与えますが、これは比較的便利です。

③BFCは要素が浮動要素によって覆われるのを防ぐことができます
上で述べたように、浮動要素のブロック兄弟要素は浮動要素の位置を無視して行全体を占有しようとするため、浮動要素によって覆われます兄弟要素 Post-BFC の要素とトリガーを使用すると、この発生を防ぐことができます。

CSS BFC (ブロック フォーマット コンテキスト) 関連の記事をさらに詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。