css レイアウト

レイアウト

1. ブロック要素は横一杯に広がり，縦にレイアウトされる（通常レイアウトフロー）。 sample_0
2. ブロック要素は，横にスペースがあっても，縦に並ぶ（通常レイアウトフロー）。 sample_1
3. 要素をfloat（浮かす）すると，指定した方向（left, right）へ移動する。 float指定した要素は通常レイアウトフローから除かれ，後続要素はfloat要素を包むようにレイアウトされる。 sample_2 フロート@MDN web docs
4. 後続要素がfloat要素を包むのを止めさせるには，clearを設定する。 sample_3
5. windowの高さに合わせ，footerを最下部に配置する。 sample_4
6. bodyのwidthを指定して中央に寄せる。body{ width: 940px; margin: 0 auto; } sample_5
7. 背景色を指定した例。 sample

新しいレイアウト

1. Flexbox：１次元レイアウト
2. Grid：２次元レイアウト
3. Multiple-column Layout：段組みレイアウト