floatレイアウト：2カラム構成の伝統的手法

かつてのWeb制作において、要素を横に並べるための標準的な手法が float プロパティ でした。「要素を浮かせて左右に寄せる」という本来の機能を応用して、メインコンテンツとサイドバーを並べるレイアウトを作ります。

2カラムレイアウトの基本構造

2カラムレイアウト構成図 出典：Webデザインの勉強ノート（固定幅2カラムレイアウト）

基本的な実装コード

親要素の中で「左に寄せるもの」と「右に寄せるもの」を定義します。

/* サイドバーを左に */
.sidebar {
  float: left;
  width: 250px;
}

/* メインを右に（または左に詰める） */
.main {
  float: right;
  width: 600px;
}

避けては通れない「clearfix（クリアフィックス）」

float を使うと、親要素が子要素の「高さ」を認識できなくなり、背景色が消えたり、下の要素が回り込んで重なったりするバグが発生します。

解決策：clearfix

float させた要素の親要素に以下のクラス（おまじない）を適用するのが、かつての鉄板ルールでした。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

現代における float の立ち位置