概要
MDNのCSS レイアウト入門を参考に、CSSレイアウトの基本のテクニックの概要を自分なりにまとめました。それぞれの項目について詳しく知りたい場合は、各項目の冒頭に記載してあるリンク（MDNのCSS レイアウトの各章）を参照してください。
「CSSレイアウト」とは
ビューポートや互いを基準にしてボックスを適切な場所に配置する方法
例えば、「赤い四角を画面の右半分に、青い四角を画面の左半分に配置する」「画像の右側に文章を配置し、それを1セットとして縦並びに配置する」などがCSSレイアウトということになります。四角を赤くしたり、画像や文字のサイズを整えるのは、「レイアウト」の範囲外です。
通常フロー
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Normal_Flow
ブラウザがデフォルトでHTMLページをレイアウトする方法です。
特にスタイルを設定していない状態を指します。
See the Pen
KKpKaaZ by mmkcoins (@mmkcoins)
on CodePen.
displayプロパティ
https://developer.mozilla.org/ja/docs/Web/CSS/display
要素が通常フローでどのように振る舞うかを変更するプロパティです（block, inlineなど）。
またはdisplay値によってオンにされるレイアウト方法全体を指します（flexなど）。
任意の要素に設定できます。
- ブロック要素（
block）: 縦並び - インライン要素（
inline）: 横並び
See the Pen mdJdRmV by mmkcoins (@mmkcoins) on CodePen.
フレックスボックス
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Flexbox
Flexible Box Layout Moduleの略です。
子項目にflexプロパティ（向き、要素の大きさなど）を追加できます。
See the Pen eYNYgRL by mmkcoins (@mmkcoins) on CodePen.
グリッド
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Grids
行と列に物を並べる（2次元）用に設計されています。
子項目にプロパティを設定しなくても自動で配置されます。開始ラインや終了ラインを設定することで柔軟に配置できます。
See the Pen
eYNYgjb by mmkcoins (@mmkcoins)
on CodePen.
フロート
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Floats
設定すると、要素が左または右に移動し、通常フローから除かれます。
また、フロート項目を囲んでいるコンテンツが周囲に浮き（回り込み）ます。
See the Pen
zYGYNVg by mmkcoins (@mmkcoins)
on CodePen.
位置指定（positionプロパティ）
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Positioning
通常フローの時に要素が配置されていた場所から、別の場所に移動できます。
静的位置指定 (Static Positioning)
デフォルトです。特別な位置指定がありません。
相対位置指定 (Relative Positioning)
通常フロー内の位置に相対的に移動できます。
絶対位置指定 (Absolute Positioning)
ページの通常のレイアウトフローから完全に外れます。
<html>の端に相対的な位置に固定できます。
固定位置指定 (Fixed Positioning)
ブラウザのビューポート基準で要素を固定します。
粘着位置指定 (Sticky Positioning)
ビューポートからオフセットにぶつかるまではstaticの、それ以降はfixedの挙動をします。
割と最近できたプロパティです。
See the Pen RwPwpbp by mmkcoins (@mmkcoins) on CodePen.
表レイアウト
表をスタイルするための機能です。
display: table-cell;のような書き方をすると表レイアウトになります。
表以外のレイアウトにも使えるようです（表レイアウトでページレイアウトを行っていた時代もあった、らしい）。
See the Pen
rNVNyaE by mmkcoins (@mmkcoins)
on CodePen.
段組みレイアウト
https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Multiple-column_Layout
新聞のように複数列にレイアウトする方法です。
See the Pen
RwPwpWg by mmkcoins (@mmkcoins)
on CodePen.