BFC ブロックの書式設定コンテキスト (画像とテキスト) を理解する方法

この記事で共有する内容は、BFC ブロックの書式設定コンテキスト (画像とテキスト) を理解する方法についてです。次に、具体的な内容を見てみましょう。

BFC の概念

BFC (ブロック フォーマット コンテキスト) ブロック フォーマット コンテキストは、Web ページのブロック レベルの要素レイアウトとフローティング要素が相互に対話する領域です。 BFC は独立したレイアウト環境です (実際のページがレンダリングされるときは表示されません)。この機能は、BFC によって構築された領域の内部要素のレイアウトは、外部の世界の影響を受けません。浮動兄弟要素とその子の影響ではありません。 BFC では、要素は上から順に垂直方向に配置され、2 つの要素間の垂直方向の間隔はマージン値によって決まります。 BFC では、2 つの隣接するブロックレベル要素の垂直方向のマージンが崩れます。 (後で詳しく説明します)

BFC を形成するための条件:

1. フローティング、絶対配置、固定配置、これらのメソッドは要素をドキュメント フローから切り離し、独立した BFC を形成できます。
2.display:inline-block/table-cells/table-captions/inline-flex (非ブロックレベル要素のブロックコンテナ要素)
3.overflow:auto/hidden/scroll
overflow 属性自体は特別なものではありません, ただし、要素がフローティング要素の影響を受けないように、BFC を生成して独立したレイアウト環境を作成します。

BFC を使用してフローティング効果をクリアする例:

BFC の役割:

1. フローティングの副作用をクリアします (フローティングを BFC 領域に制限します)
2. 親を開きます。要素 (パッケージ) フローティング要素を保持します) フロートをクリアすると、親要素が展開されます
3. マージン マージを防止する

マージン マージが発生する 3 つのシナリオ:

1. 同じ BFC 環境では、通常のドキュメント フロー内の垂直方向に隣接する要素の余白がマージされます。

2. 親要素と子要素の余白を結合します。

3. 空の要素の余白が結合されます。

このマージンが別の要素のマージンに遭遇した場合、それもマージされます

マージンマージルール:

両方のマージンが正の場合、2 つの最大値を取ります。

2. マージンがすべて負の値の場合は、絶対値が大きい方を採用し、次に 0 の位置から負の変位を取得します。 3. 正の値と負の値がある場合は、大きい絶対値が最初に取り出されます。次に、負のマージンの最大の絶対値が、正のマージン値の最大のマージンに加算されます。

すべての隣接するマージンは一緒に計算に参加する必要があり、段階的に実行することはできません。

隣接する要素のマージンが結合しないようにする方法:

1. 空ではないコンテンツ、パディング、ボーダー、またはクリアで区切ります。

2. 共通のストリーム内にないか、BFC によって分離されていません。 3. 余白は縦方向に隣接しないようにします。

関連する推奨事項:

ブラウザ互換性問題の CSS 分析

CSS レスポンシブ実装コードと効果について

以上がBFC ブロックの書式設定コンテキスト (画像とテキスト) を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。