【2023年最新版】clearfixの記述方法と使用方法【CSS】

Webデザイナー、UI/UXデザイナーの@sdesignlaboです。

floatを解除する方法で一番手っ取り早い「clearfix（クリアフィックス）」の記述方法を解説します。
コピペして使うと実装に1分かかりませんよ！

この記事の目次

clearfixのソース

clearfixのソースです。
コピペして使えば1分で実装できます。

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

クラス名に「cf」や「clear-fix」等も見かけますが、私は「clearfix」を使っています。

clearfixの対応ブラウザ

Google Chrome、Firefox、Safari、Opera、Microsoft Edgeの最新バージョン、IE11以降に対応。
一番新しいブラウザ使っておけば間違いないです。

しかし今時わざわざIEなんて使っている人、いるのだろうか…？

clearfix不使用の例

clearfixの使いどころの例です。
まずはclearfixを使用しない例を紹介します。

デモ

floatで左寄せのdiv

floatで右寄せのdiv

上記floatで左右に配置した要素の下に置きたいdiv

赤と青のdiv要素が無くなった状態なので、黄色のdivがヘンな場所に表示されています。

HTML

<div class="float_container">
  <div class="float_left">floatで左寄せのdiv</div>
  <div class="float_right">floatで右寄せのdiv</div>
</div>
<div class="float_bottom">上記floatで左右に配置した要素の下に置きたいdiv</div>

CSS

.float_container{
  width:100%;
}
.float_left{
  float:left;
  width:45%;
  background-color:red;
  padding:50px 0;
  color:#fff;
  text-align:center;
}
.float_right{
  float:right;
  width:45%;
  background-color:blue;
  padding:50px 0;
  color:#fff;
  text-align:center;
}
.float_bottom{
  background-color:yellow;
  padding:50px 0;
  text-align:center;
}

clearfixを使用した例

先程のソースにclearfixを適用した例です。

デモ

floatで左寄せのdiv

floatで右寄せのdiv

上記floatで左右に配置した要素の下に置きたいdiv

clearfixを適用すると回り込みが解除されて思い通りのレイアウトが可能になります。

HTML

<div class="float_container clearfix">
  <div class="float_left">floatで左寄せのdiv</div>
  <div class="float_right">floatで右寄せのdiv</div>
</div>
<div class="float_bottom">上記floatで左右に配置した要素の下に置きたいdiv</div>

float_containerのdiv要素にclearfixを追加しました。

CSS

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}
.float_container{
  width:100%;
}
.float_left{
  float:left;
  width:45%;
  background-color:red;
  padding:50px 0;
  color:#fff;
  text-align:center;
}
.float_right{
  float:right;
  width:45%;
  background-color:blue;
  padding:50px 0;
  color:#fff;
  text-align:center;
}
.float_bottom{
  background-color:yellow;
  padding:50px 0;
  text-align:center;
}