通常フロー（Normal Flow）は、CSSレイアウトの土台となる「要素が特別な位置指定をしない限り従う配置ルール」です。
通常フロー
ブロックレベル要素
- <div>, <p> などは、親コンテナの幅いっぱいを使い、上から下へ一行ずつ積み重なる。
- 隣接するブロック同士の縦マージンは上下マージンが重なると大きい方のマージンだけが適用される。
インライン要素
- <span>, テキストノードは、左から右へ文章のように並び、行末で自動的に折り返される。
- 水平のマージン／パディングを指定すると文字間のスペースとして機能しますが、垂直マージンを指定しても周囲の要素との間隔には影響を与えない。これは、インライン要素が行内での配置を基準としており、垂直方向のマージンが行の高さに影響しないため。
通常フローから外れるケース
浮動配置 - float
- 通常フローから除外
float-leftやfloat-rightを指定すると、要素は 通常フローから外れ、可能な限り左または右に寄せられます。 - 他の要素が周り込む
float プロパティを使用して要素（例えば画像）を左または右に浮かせた場合、その周囲のインライン要素（主にテキスト）が、浮かせた要素の周囲を取り囲むように配置されます。
実際の使用例・・・
画像とテキストの回り込み: 画像を左に配置し、テキストがその右側に回り込む場合。
横並びのナビゲーションバー: ナビゲーションリンクを横に並べるために使用。
複数列のレイアウト: 複数の列を横に並べるレイアウトを作成する際に使用。
広告バナーの配置: テキストの横に広告バナーを配置する場合。
絶対配置 - absolute
- 通常フローから除外
absoluteを指定した要素は、通常の文書の流れから取り除かれ、他の要素とは独立して配置されます。 - 最も近い「位置指定された」祖先要素を基準に配置
要素は、最も近い「位置指定された」祖先要素（position が relative, absolute, fixed, または sticky に設定されている要素）を基準にして配置されます。もしそのような祖先要素が存在しない場合、ページ全体（ 要素）を基準に配置されます。 - 配置の制御
top, right, bottom, left プロパティを使用して、基準となる要素からの位置を指定できます。
実際の使用例・・・
ドロップダウンメニューの作成: メニューの下にドロップダウンを表示する場合。
ツールチップの表示: 特定の要素にマウスを乗せたときにツールチップを表示する場合。
モーダルウィンドウの表示: 画面の中央にモーダルウィンドウを表示する場合。
画像ギャラリーのオーバーレイ: 画像の上にキャプションやボタンを重ねて表示する場合。
固定配置 - fixed
- 通常フローから除外
fixedを指定した要素も、通常の文書の流れから取り除かれます。 - ビューポートを基準に配置
要素は、ブラウザの表示領域（ビューポート）を基準にして配置されます。 - スクロールに影響されない
ページをスクロールしても、要素の位置は固定され、常に同じ位置に表示されます。 - 配置の制御
top, right, bottom, left プロパティを使用して、ビューポートからの位置を指定できます。
実際の使用例・・・
固定ヘッダーの作成: ページ上部に常に表示されるヘッダーを作成する場合。
スクロール追従のボタン: ページの右下に常に表示されるボタンを作成する場合。
通知バーの表示: 画面の上部または下部に固定された通知バーを表示する場合。
チャットウィンドウの固定: 画面の隅に常に表示されるチャットウィンドウを作成する場合。