BFCモードの詳しい説明

今回はBFCモードについて詳しく説明します。BFCモードを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

BFCの詳細説明【ブロックフォーマットコンテキスト】

BFCは一般的ではないかもしれませんが、間違いなく頻繁に使用することになるでしょう。では、それは一体何なのか見てみましょう。

BFC の公式説明は次のとおりです。浮動要素と絶対配置 要素、非ブロック レベル ボックスのブロック レベル コンテナ (inline-blocks、table-cells、 など) > table-captions)、および「visiable」以外のオーバーフロー値を持つブロックレベルのボックスは、その内容に対して新しいブロックレベルの書式設定コンテキストを作成します。 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的块级格式化上下文。

在一个块级格式化上下文里，盒子从包含块的顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。两个相邻的块级盒子的垂直外边距会发生叠加。

在块级格式化上下文中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此，除非这个盒子创建一个新的块级格式化上下文。

上面反复提到了“ block formatting context”，显而易见BFC就是他们的缩写，官方还有”inline formatting context“，那也就是说”formatting context“我们需要仔细的看一下是什么意思，那我们就拆分来看看：

formatting：n，格式化的意思，v，使格式化( format的现在分词 ); 规定…的格式（或形状、大小、比例等）;
context：语境; 上下文; 背景; 环境;

放到一起的意思就是“格式化上下文”，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC.

Box也是比较重要的一个概念，Box是CSS布局的对象和基本单位， 直观点来说，就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性，决定了这个Box的类型。 不同类型的Box， 会参与不同的Formatting context(一个决定如何渲染文档的容器)，因此Box内的元素会以不同的方式渲染。

例如display属性值为block, list-item, table的元素，会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box。并且参与inline formatting context

ブロックレベルの書式設定コンテキストでは、ボックスは、含まれるブロックの上部から順番に垂直に配置されます。2 つのボックス間の垂直方向の間隔は、マージンの値によって決まります。 2 つの隣接するブロックレベル ボックスの垂直方向のマージンは重なり合っています。

ブロックレベルの書式設定コンテキストでは、各ボックスの左外端 (margin-left

)フロートが存在する場合でも、ボックスが新しいブロックレベルの書式設定コンテキストを作成しない限り、コンテナの左端 (境界線左) (または右から左への書式設定の場合は右端) に触れます。

「block formatting context」は上で繰り返し言及されていますが、明らかに BFC はその略語であり、公式のものには「 formatting」を意味する「<code>inline formatting context」もあります。 context「その意味を詳しく調べる必要があるので、分解して見てみましょう:

フォーマット: n 、フォーマット (format の現在分詞) の意味。
context: context; ;

まとめると、「フォーマットコンテキスト」を意味します。これはページ内のレンダリング領域であり、そのサブ要素がどのように配置されるか、他の要素との関係や相互作用を決定する一連のレンダリングルールがあります。要素。

最も一般的な書式設定コンテキストは、ブロック書式設定コンテキスト (略して BFC) と インライン書式設定コンテキスト (略して IFC) です。 CSS2.1 には BFC と IFC しかなく、CSS3 では GFC と FFC が追加されました。 Box は、直観的な観点から見ると、CSS レイアウトのオブジェクトおよび基本単位です。多くのボックスで構成されています。要素の種類と表示属性によってボックスの種類が決まります。 さまざまなタイプの Box はさまざまな Formatting context (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、Box 内の要素はさまざまな方法でレンダリングされます。 たとえば、ブロック、リスト項目、テーブルの表示属性値を持つ要素は、ブロックレベルのボックスを生成します。そして、ブロックの書式設定コンテキストに参加します。インライン レベル ボックス: 表示属性が inline、inline-block、および inline-table である要素は、インライン レベル ボックスを生成します。 インライン書式設定コンテキストに参加します。

それでは、分かりやすく理解しましょう。BFC は「ブロックレベルのフォーマットコンテキスト」を意味します。BFC を作成する要素は独立したボックスですが、内部を指定する BFC の作成に参加できるのはブロックレベルのボックスだけです。 Block - レベルボックスのレイアウト方法。この独立したボックス内のレイアウトは外部の影響を受けません。もちろん、外部の要素にも影響しません。

それでは、BFC ボックスのいくつかの機能を見てみましょう:

1. 内部ボックスは上から順に垂直方向に配置されます。 2. ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスの余白は重なり合います。 3. 各要素のマージン ボックスの左側は、それを含むブロックの境界ボックスの左側と接しています (左から右への書式設定の場合、それ以外の場合はその逆です)。これは浮きがあった場合にも当てはまります。 4. BFC エリアはフロート ボックスと重なりません。 5. BFC はページ上で独立したコンテナであり、コンテナ内のサブ要素は外部の要素に影響を与えません。

6. BFC の高さを計算するとき、浮動要素も計算に参加します。 🎜🎜🎜🎜🎜🎜BFC はどのようなシナリオで使用できますか? 🎜🎜🎜🎜🎜🎜1. ボックスが上下に配置されている場合、上のボックス 🎜margin-bottom🎜:50px;下のボックス 🎜margin-top🎜:50; 次に、2 つのボックスが重ね合わせによって計算されると、距離は 100 ピクセルになるはずですが、実際には 2 つのマージンの値が 50 ピクセルだけ残っていることがわかります。この時点で、BFC モードをトリガーし、ボックスの 1 つに親要素を追加できます。

2. レイアウトに使用します

フローティングがある場合でも、要素の左マージンが含まれるブロック コンテナーの外側の境界線に接触する場合、このメソッドを使用して 2 列のレイアウトを作成できます。最初のボックスはフローティングであり、2 番目のボックスのマージン左が割り当てられます

3. フロートをクリアして BFC の高さを計算するために使用されます

2 つの子の間のフローティング関係が原因であることがわかりました。要素の内部では、2 つのボックスが親から分離されています。 要素を含むブロックでは、親要素の高さが折りたたまれています。そのため、高さを計算するときに、親要素に 2 つのボックスの子要素が含まれるようにする必要があります。 2 つのフローティング子要素が参加するため、フロートを閉じて、親要素の BFC をトリガーする必要があります (例: overflow:hidden;)。この記事のケースを読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、こちらをご覧ください。 、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

CSS で属性値の継承を使用する方法

CSS で点線の効果を作成する方法

CSS3 属性のトランジション、アニメーション、トランスフォーム

以上がBFCモードの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。