フロー内とフローの外

以下のものを除いて、すべての要素がフロー内にあります。

• 浮動アイテム
• position: absolute のアイテム (同様に機能する position: fixed を含む)
• ルート要素 (html)

フローの外のアイテムは、新しいブロック整形コンテキスト (BFC) を作成するので、その中のものはページの残りから独立して、小さなレイアウトのように見えます。したがってルート要素はフローの外で、文書内のすべてのコンテナーとして、文書のブロック整形コンテキストを確立します。

この例では 1 つの div と、それから 2 つの段落があります。段落には背景色を塗っており、 div を左側に浮動させました。 div はフローの外になりました。

浮動アイテムとして、最初は通常のフローであるようにレイアウトされますが、そのあとでフローから取り出され、左側のできるだけ遠くに移動されました。

次の段落の背景色が下層に表示されているのが見えます。その段落の行ボックスだけが短縮され、浮動アイテムの周りでコンテンツを折り返す効果があります。段落のボックスは、通常のフローの規則に従って表示されます。このため、行ボックスから距離を置くために浮動アイテムの周りに間隔を作るには、アイテムにマージンを追加する必要があります。このために以下のフロー内のコンテンツに追加することができるものはありません。

アイテムに position: absolute または position: fixed を与えると、アイテムをフローから外し、アイテムが占めるはずだった空間も除去されます。次の例では、3 つの段落要素を用い、2 番目の要素は position を absolute にし、オフセット値を top: 30px および right: 30px としています。アイテムは文書フローから除去されています。

position: fixed を使用しても、アイテムをフローから除去しますが、オフセットは包含ブロックではなくビューポートからのものになります。

位置指定してアイテムをフローの外に持ち出す場合、コンテンツが重複する可能性を管理する必要があります。フローの外ということは、基本的にページ内の他の要素が、その要素が存在することを知ることがなく、従って影響を与えないことを意味します。

アイテムに position: relative によって相対位置を与えた場合、フロー内には残りますが、周囲を押し広げるためにオフセット値を使用することができます。しかし、以下の例のように、通常フローで配置するはずだった空間は予約されます。

アイテムを除去するために何かをしたり、アイテムを通常フローで配置される場所からずらしたりした場合は、重ならないようにコンテンツやコンテンツの周囲を管理する必要が出てくる可能性があります。浮動をクリアしたり、要素に position: absolute を設定して他のコンテンツの上に来ないようにします。このため、フロー内の要素を除去する方法は、このような影響を理解したうえで使用する必要があります。

このガイドでは、特定の種類の位置指定を実現するために、要素をフローの外に持ち出す方法を紹介しました。次のガイドでは、 Formatting Contexts Explained の中で、ブロック整形コンテキストを作成する上での関連する問題を見てみます。

• レイアウトの学習: 位置指定