浮動をクリアする方法（Clearfix）

clearfix テクニックを使用して浮動をクリアする方法を学びます。

clearfix テクニック

要素が含む要素よりも高く、浮動している場合、それがコンテナを溢れます。

その後、この問題を解決するために、含まれる要素に overflow: auto; を追加できます：

例

.clearfix {
  overflow: auto;
}

自分で試してみる

外側マージンと内側マージンを制御できる場合、overflow: auto; 浮動をクリアする効果が良いです（それでは、スクロールバーが見えるかもしれません）。

しかし、新しい、現代的 clearfix テクニックはより安全に使用できます。ほとんどのウェブページでは以下のコードを使用しています：

例

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

自分で試してみる

関連ページ

チュートリアル：CSSフロート