ウェブデザインにおけるノーマルフローとは？

ビル・オックスフォード/ゲッティイメージズ

通常のフローは、ほとんどの状況で要素が Web ページに表示される方法です。 HTML のすべての要素は、インラインボックスまたはブロックボックス。

ブロックボックスの配置

通常のフローでは、ブロックボックスは次々にページに配置されます ( HTML ）。それらは収容ボックスの左上から始まり、上から下に積み重ねられます。各ボックス間の距離は、上マージンと下マージンが互いに重なり合うマージンによって定義されます。

たとえば、次の HTML があるとします。

|_+_|これはより広い div です。

各

インラインボックスは、コンテナ要素の上部から順番にページ上に水平に配置されます。インラインボックスのすべての要素を 1 行に収めるのに十分なスペースがない場合、要素は次の行に折り返され、そこから垂直に積み上げられます。

たとえば、次の HTML では:

|_+_|

段落はブロック要素ですが、5 つのインライン要素があります。

したがって、Web デザイナーの介入なしに、これらのブロック要素とインライン要素が Web ページにどのように表示されるかは、通常の流れです。要素がページ上のどこにあるかに影響を与えたい場合は、CSS ポジショニングまたは CSS フロート .