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

この記事を読むのに必要な時間は約 9 分です。

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;
}

Web制作・プログラミングを学ぶ

さらにWEB制作やプログラミングについて学習したい方・転職を目指されている方は、エンジニア養成スクールやWebデザインスクールで集中的に学ぶと効率的かつ確実です。

独学だと初期段階でつまづき嫌になってしまう事も多々あります。
スクールだと現役のプロによる手厚いサポートで安心して最新のWeb開発について学ぶことができます。

下記で多くのスクールの中から講師の質・授業カリキュラムの質・転職成功率が高く、本当に受講する価値のあるスクールのみ厳選して紹介しておりますので是非ご覧ください。