CSSクリアフィックス(clearfix)ハックの使い方と活用シーンを徹底解説

CSS FlexboxやCSS Gridが主流となった現在のWeb開発では、CSS Clearfix(クリアフィックス)を意識する機会はほとんどありません。FlexboxやGridは、floatを使うよりも要素の配置をより簡単に、より柔軟に解決してくれるからです。

それでも、レガシーコードの保守では依然としてfloatが使われているケースがあり、「モダンな手法へ書き換える時間も予算もない」という状況は少なくありません。そんな場面に備えて、clearfixの知識は今でも持っておく価値があります。

本記事では、clearfixハックの仕組みと使い方を解説し、あわせてその後継ともいえる display: flow-root についても紹介します。

floatプロパティとは?

まずおさらいとして、floatプロパティは、指定した要素をコンテナの左または右に寄せ、後続の要素を回り込ませるためのものです。以下のコードでは、画像を含むリスト項目に対して float: left を適用しています。

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
  margin: 20px;
}

li {
  list-style: none;
  float: left;
}

</style>
</head>
<body>
<ul>
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element.</p>
</body>
</html>

このコードでは、水色の背景を持つ <ul> の中に画像が収まる想定ですが、画像の高さが他の要素より高いため、floatが解除されないままオーバーフローが発生し、マージンも崩れてしまいます。

これが、水色のコンテナが極端に低くなっている原因であり、段落要素がfloat要素と横並びになってしまう理由です。これは、親コンテナより高い子要素にfloatを適用した際のデフォルトの挙動です。

解決策：clearfixハック

最初の解決策が、いわゆるclearfixハックです。このハックは、親コンテナの直後に空のコンテンツを挿入することで、親要素がfloatされた子要素全体を包み込むように拡張させます。擬似要素 ::after を使えば、HTMLを変更せずにCSSだけで実現できます。

<!DOCTYPE html>
<html lang="en>
<head>
	<title>CSS Clearfix</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
body {
  background-color: grey;
}

ul {
  max-width: 800px;
  width: 100%;
  background: lightblue;
  border: 5px double black;
  padding: 20px;
}

img {
  width: 300px;
}

li {
  list-style: none;
  float: left;
  margin: 20px;
}

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

</style>
</head>
<body>
<ul class="clearfix-hack">
  <li>
    <img src="https://images.unsplash.com/photo-1567268377583-d1aaf9ccfc22?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3300&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1592283338081-beb63fa6a156?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1850&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1583513702439-2e611c58e93d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3298&q=80" />     </li>
  <li>
    <img src="https://images.unsplash.com/photo-1552944150-6dd1180e5999?ixlib=rb-1.2.1&auto=format&fit=crop&w=1850&q=80" />     
  </li>
  <li>
    <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" />     </li>
</ul>
<p>Here is a sample paragraph element.</p>
</body>
</html>

間隔を整えるために <li> にマージンを追加したほかに新たに加えたのは、.clearfix-hack::after セレクタだけです。ここには、content・display・clear の3つのプロパティを指定しています。

content: 空文字列を設定し、擬似要素を生成します。
clear: 値に both を指定することで、左右両方のfloatを解除し、親要素の境界線をfloat要素の下まで引き下げます。
display: block または table を指定して、ページ上にデータや画像を正しく表示できるようにします。

この結果、画像がコンテナ内にきちんと収まり、その下に <p> 要素が続く、期待通りのレイアウトになります。

clearfixの時代は終わり? 新しい選択肢「display: flow-root」

FlexboxやGridの登場により、clearfixの必要性は薄れつつあります。さらに、CSSにはclearfixをよりシンプルに置き換える新しい方法も登場しています。

.clearfix-hack {
	display: flow-root;
}

上記のコードで .clearfix-hack::after セレクタを置き換えてみてください。見た目に変化はないはずです。
実は display: flow-root は、clearfixハックと同じ効果を自動的に実現してくれるプロパティです。擬似要素のための余計なルールが不要になり、コードも格段に読みやすくなります。

まとめ

本記事では、子要素にfloatを指定したことで発生するレイアウト崩れを修正する2つの方法――従来のclearfixハックと、新しい display: flow-root――を解説しました。FlexboxやGridが普及した現在、これらのテクニックを実際に使う場面は、過去に作成されたコードベース(レガシーコード)の保守時が中心になるでしょう。それでも、floatの挙動とその対処法を理解しておくことは、CSSのレイアウトの仕組みを深く知るうえで非常に有益です。

CSSでドロップダウンメニューを作る方法を初心者向けに解説

CSSの!importantルールとは？使いどころと注意点を解説

HDRとは？AndroidスマホでHDR撮影を使いこなす方法
ここ数年でスマートフォンのカメラ性能は目覚ましい進化を遂げました。多くの人は従来のデジタルカメラを手放し、手軽さに優れたスマホでの撮影を選ぶようになっています。この変化を支えているのは、ハードウェアとソフトウェアの両面での進化です。スマホのカメラ機能が高度になるにつれ、写真に対してより細かくコントロールできるようになりました。現在のほとんどのAndroidスマホには「HDR」という設定項目がありますが、そもそもHDRとは何なのでしょうか。そして、どんなときに使うべきなのでしょうか。 HDRの仕組み HDRはハイダイナミックレンジ（High Dynamic Range）の略称です。「ダイナミッ
Windows 8/10でWindows Updateトラブルシューティングツールを使ってアップデートエラーを解決する方法
MicrosoftはWindows 7の登場とともに、Windows OS向けのOTA（Over The Air）アップデート機能を導入しました。これにより、システムの問題が発生した際にも、アップデートを配信することで迅速に対応できるようになりました。しかし、Windowsユーザーであれば、最新ビルドへアップデートする際にさまざまなエラーに遭遇することがあるかもしれません。こうした問題に対処するため、Microsoftは「Windows Updateトラブルシューティングツール（Fixit）」という便利なツールを提供しています。このツールは、Windows内部のサービス設定を自動的にリセットす