通常のフローは、ほとんどの状況で要素がWebページに表示される方法です。 HTMLのすべての要素は、インラインボックスまたはブロックボックスの内側のボックスです。
ブロックボックスのレイアウト
通常のフローでは、ブロックボックスはページ上に順番に（ HTMLで書かれた順に）配置されます。 それらは収納ボックスの左上から始まり、上から下に積み重ねられます。 各ボックス間の距離は、上下のマージンが互いに崩壊するマージンによって定義されます。
たとえば、次のHTMLがあるとします。
これが最初のdivです。 200ピクセル幅で、周りに5ピクセルの余白があります。
これはより広いdivです。
これは2番目のものより少し広いdivです。
各DIVはブロック要素なので、前のブロック要素の下に配置されます。 左の各外側のエッジは、格納するブロックの左端に接触します。
インラインボックスのレイアウト
インラインボックスは、コンテナエレメントの上部で、最初から次の順に、ページ上に水平に配置されます。 インラインボックスのすべての要素を1行に収めるための十分なスペースがない場合は、次の行に折り返してそこから垂直に積み重ねます。
たとえば、次のHTMLでは：
このテキストは太字で 、このテキストは斜体です。 これはプレーンテキストです。
段落はブロック要素ですが、5つのインライン要素があります：
- "このテキストは"
- "大胆な"
- "このテキストは"
- "イタリック"
- "これはプレーンテキストです。"
通常の流れは、これらのブロックとインライン要素がWebデザイナーの介入なしにWebページにどのように表示されるかです。
要素がページ上のどこにあるかに影響を与えたい場合は、CSSの配置やCSSの浮動を使用できます。