整形コンテキストの紹介

この翻訳は不完全です。英語から この記事を翻訳 してください。

この記事では整形コンテキストの概念を紹介します。ブロック整形コンテキスト、インライン整形コンテキスト、フレックス整形コンテキストなど、いくつかの種類があります。どのように動作するのか、これらの動作をどのように利用できるのかについても紹介します。

ページ上のすべてのものが整形コンテキスト、またはコンテンツを特定の方法でレイアウトする際に定義されている領域の一部です。ブロック整形コンテキスト (BFC) は、子要素をブロックレイアウトの規則に則って配置し、フレックス整形コンテキストは、子要素をフレックスアイテムとして配置するなどです。それぞれの整形コンテキストは、そのコンテキストにあるときにどのようにレイアウトを行うかの特定の規則を持っています。

ブロック整形コンテキスト

The outermost element in a document that uses block layout rules establishes the first, or initial block formatting context. This means that every element inside the <html> element's block is laid out according to normal flow following the rules for block and inline layout. Elements participating in a BFC use the rules outlined by the CSS Box Model, which defines how an element's margins, borders, and padding interact with other blocks in the same context.

新しいブロック整形コンテキストの生成

The <html> element isn't not the only element capable of creating a block formatting context. Any element that defaults to block layout also creates a block formatting context for its descendant elements. In addition, there are CSS properties that can cause an element to create a BFC even if it doesn't do so by default. This is useful because a new BFC will behave much like the outermost document in that it becomes a mini-layout inside the main layout. A BFC contains everything inside it, float and clear only apply to items inside the same formatting context, and margins only collapse between elements in the same formatting context.

In addition to the root element of our document (<html>) ,a new BFC is created in the following situations:

Let's have a look at a couple of these in order to see the effect creating a new BFC.

In the example below, we have a floated element inside a <div> with a border applied. The content of that div has floated alongside the floated element. As the content of the float is taller than the content alongside it, the border of the div now runs through the float. As explained in the guide to in-flow and out of flow elements, the float has been taken out of flo so the background and border of the div only contain the content and not the float.

Creating a new BFC would contain the float. A typical way to do this in the past has been to set overflow: auto or set other values than the initial value of overflow: visible.

Setting  overflow: auto created a new BFC containing the float. Our div now becomes a mini-layout inside our layout. Any child element will be contained inside it.

The problem with using overflow to create a new BFC is that the overflow property is meant for telling the browser how you wish to deal with overflowing content. There are some occasions in which you will find you get unwanted scrollbars or clipped shadows when you use this property purely to create a BFC. In addition, it is potentially not very readable for a future developer, as it may not be obvious why you used overflow for this purpose. If you do this, it would be a good idea to comment the code to explain.

display: flow-root を使用した明示的な BFC の生成

Using display: flow-root on the containing block will create a new BFC without any other potentially problematic side-effects.

With display: flow-root on the <div>, everything inside that container participates in the block formatting context of that container, and floats will not poke out of the bottom of the element.

The name of the flow-root keyword refers to the fact that you're creating something that serves, in essence, like a new root element (like <html> does), given how the new context is created and its flow layout functions.

インライン整形コンテキスト

Inline formatting contexts exist inside other formatting contexts and can be thought of as the context of a paragraph. The paragraph creates an inline formatting context inside which such things as <strong>, <a>, or <span> elements are used on text.

The box model does not fully apply to items participating in an inline formatting context. In a horizontal writing mode line, horizontal padding, borders and margin will be applied to the element and push the text away left and right. However, margins above and below the element will not be applied. Vertical padding and borders will be applied but may  overlap content above and below as, in the inline formatting context, the line boxes will not be pushed apart by padding and borders.

その他の整形コンテキスト

This guide covers flow layout and is therefore not referring to other possible formatting contexts. As such, it is useful to understand that creating any kind of formatting context will change the way elements inside that formatting context behave. This behavior is always described in the specification and also here on MDN.

まとめ

このガイドでは、ブロックおよびインライン整形コンテキストにおける詳細と、ブロック整形コンテキスト (BFC) を生成することの重要な目的を見てきました。次のガイドでは、通常フローがどのように様々な所持方向に対応するかを見ていきます。

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, mdnwebdocs-bot
最終更新者: mfuji09,