CSS floatパターン集｜レイアウトの仕組みと現代との比較

.float-left {
  float: left;           /* 要素を左に寄せ、後続要素を右側に回り込ませる */
  margin: 0 16px 8px 0; /* 右と下に余白を設けてテキストとの間隔を確保 */
  width: 120px;           /* float 要素は幅を明示的に指定する必要がある */
}
.float-right {
  float: right;          /* 要素を右に寄せ、後続要素を左側に回り込ませる */
  margin: 0 0 8px 16px;
  width: 120px;
}

/* clearfix：float した子要素を親が正しく囲むための定番テクニック */
.clearfix::after {
  content: '';      /* 疑似要素を生成するために必須（中身は空） */
  display: table;   /* ブロック要素として配置し float の影響を受けないようにする */
  clear: both;      /* 左右どちらの float も解除して親が高さを認識できるようにする */
}
.box {
  float: left;    /* 要素を左に float させる */
  width: 48%;
  margin: 0 2% 0 0;
}

.clearfix::after { content: ''; display: table; clear: both; }  /* 高さ崩れ防止 */
.sidebar {
  float: left;    /* サイドバーを左に寄せる */
  width: 200px;  /* サイドバーの幅を固定する */
}
main {
  margin-left: 200px;  /* サイドバー幅と同じ値を左マージンに設定して隣に配置する */
}

.clearfix::after { content: ''; display: table; clear: both; }
.nav-left {
  float: left;    /* 左サイドバーを左に寄せる */
  width: 160px;  /* 左サイドバーの幅を160pxに固定する */
}
.aside-right {
  float: right;  /* 右サイドバーを右に寄せる */
  width: 180px;  /* 右サイドバーの幅を180pxに固定する */
}
main {
  margin-left: 160px;   /* 左サイドバーの幅ぶんだけ左マージンを確保する */
  margin-right: 180px;  /* 右サイドバーの幅ぶんだけ右マージンを確保する */
}

.row {
  width: 100%;
}
.row::after { content: ''; display: table; clear: both; }  /* clearfix */
.col {
  float: left;               /* 全カラムを左に float させる */
  width: 33.33%;             /* 3等分（100 ÷ 3 ≈ 33.33%） */
  padding: 0 12px;           /* カラム内の左右の余白 */
  box-sizing: border-box;    /* padding を幅の内側に含める */
}

.float-left  { float: left;  width: 120px; }
.float-right { float: right; width: 120px; }
.clear {
  clear: both;   /* 左右どちらの float も解除してここから通常フローに戻る */
  /* clear: left  → 左 float だけ解除 */
  /* clear: right → 右 float だけ解除 */
}

header, footer {
  width: 100%;  /* ヘッダーとフッターは横幅いっぱいに広げる */
}
.clearfix::after {
  content: ''; display: table; clear: both;  /* 高さ崩れ防止 */
}
.sidebar {
  float: left;    /* サイドバーを左端に固定する */
  width: 200px;  /* サイドバーの幅を200pxに固定する */
}
main {
  margin-left: 200px;  /* サイドバーの幅ぶん左マージンを確保してメインを隣に配置 */
}

/* float 版：clearfix 必須・margin で幅を確保する必要がある */
.wrap::after {
  content: ''; display: table; clear: both;  /* clearfix がないと高さが崩れる */
}
.sidebar {
  float: left;    /* サイドバーを左に寄せる */
  width: 200px;  /* 幅の明示的な指定が必須 */
}
main {
  margin-left: 200px;  /* サイドバー幅ぶん余白を作る（自動計算されない） */
}

/* Flexbox 版：clearfix 不要・直感的に書ける */
.wrap {
  display: flex;  /* これだけで子要素が横並びになる */
}
.sidebar {
  width: 200px;       /* サイドバーの幅を固定する */
  flex-shrink: 0;     /* 幅が縮まないようにする */
}
main {
  flex: 1;  /* 残りのスペースをすべて占有する（margin の計算不要） */
}

/* Grid 版：レイアウトの意図が一目でわかる */
.wrap {
  display: grid;
  grid-template-columns: 200px 1fr;
  /* 200px → サイドバーを200pxに固定する */
  /* 1fr   → メインが残りのスペースを占有する */
  /* float も clearfix も margin の計算も一切不要 */
}