CSS は、要素の配置を制御するためにさまざまなレイアウト方式を提供する
以下は代表的なレイアウト方式
ボックスモデル（Box Model）：タグとタグの間の余白とか、境界線とかで位置を調整する
CSS
.box { width: 200px; height: 100px; margin: 10px; padding: 20px; border: 2px solid black; }

margin：外側の余白
padding：内側の余白
border：境界線
フロートレイアウト（Float）：
CSS
.left { float: left; width: 50%; } .right { float: right; width: 50%; }

フロートの仕組み：フロート要素は通常の文書フローから外れますが、後続の要素に影響を与える
これにより、親要素の高さが消えてしまう「高さ崩れ」の問題が発生することがある
解決策：
CSS
.clearfix::after { content: “”; display: block; clear: both; }

ポジショニング（Position）：
CSS
.absolute { position: absolute; top: 50px; left: 100px; }

static（デフォルト、top や left の影響を受けない）
relative（相対配置）
absolute（絶対配置、最も近い position: relative の祖先を基準とする）
fixed（固定配置、ビューポート基準）
Flexbox レイアウト（1 次元レイアウト向け）：
CSS
.flex-container { display: flex; justify-content: center;/* 水平方向の中央揃え */ align-items: center;/* 垂直方向の中央揃え */ }

Grid レイアウト（2 次元レイアウト向け）：
CSS
.grid-container { display: grid; grid-template-columns: 1fr 2fr 1fr; /* 1X 2X 1X の列は表示する */ grid-gap: 10px; }

BFC とは？
BFC は CSS のレンダリングメカニズムの 1 つで、BFC を作成することで外側の余白の相殺（margin collapse）を防ぎ、フロートを適切に処理できる
BFC の発生条件
.bfc-container {
overflow: hidden;/* BFC を発生させる */
}

BFC による margin 崩れの解決
.parent {
background: lightgray;
overflow: hidden;
}
.child {
margin-top: 20px;
background: blue;
height: 50px;
}

overflow: hidden; を指定しないと、親要素の背景が子要素の margin-top によって影響を受け、崩れが発生する可能性があります。