CSSのclearfixとは？floatで崩れるレイアウトを防ぐ方法を初心者向けに解説

clearfixとは？floatを使ったときの崩れを防ぐ方法

先生と生徒の会話形式で理解しよう

生徒

「先生、floatでボックスを左や右に並べると、親の高さが消えてレイアウトが崩れることがあります。どうしたらいいですか？」

先生

「それにはclearfix（クリアフロート）という方法を使います。clearfixを使うと、floatで崩れた親要素の高さを正しく表示できます。」

生徒

「clearfixって難しそうです。具体的にはどう書けばいいんですか？」

先生

「順を追って説明します。floatとclearの仕組みを理解してからclearfixを使うとわかりやすいです。」

1. floatでレイアウトが崩れる理由（高さの消失）

CSSのfloatプロパティは、もともと「画像にテキストを回り込ませる」ために作られた機能です。しかし、ボックスを横に並べるレイアウト手法として長年使われてきました。

ここで初心者が最もつまづきやすいポイントが、「親要素の高さが消えてしまう」という現象です。float（浮く）という言葉の通り、指定された要素は通常の配置ルールから浮き上がった状態になります。すると、親要素は「中に要素が入っていない」と勘違いしてしまい、高さが0になったり、背景色が消えたりしてレイアウトがガタガタに崩れてしまうのです。


<style>
    .parent {
        background-color: #f8d7da; /* 薄い赤色の背景 */
        border: 2px solid #dc3545;
        padding: 10px;
    }
    .child {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #007bff;
        color: white;
        margin: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .text {
        margin-top: 20px;
        color: #333;
    }
</style>

<div class="parent">
    <div class="child">floatしている子要素1</div>
    <div class="child">floatしている子要素2</div>
</div>

<p class="text">
    ↑本来なら赤い枠（親要素）が子要素を包むはずですが、floatの影響で高さが消え、枠が潰れてしまっています。
</p>

ブラウザ表示

このように、子要素が浮いてしまうことで親要素が中身を認識できなくなる状態を理解することが、clearfixを使いこなすための第一歩です。

2. clearプロパティでレイアウト崩れを確実に回避する方法

CSSのfloat（フロート）を使うと、要素が浮いた状態になり、後続の要素がその隙間に回り込もうとします。これは便利な反面、意図しない場所まで文字や画像が入り込んでしまい、「レイアウト崩れ」の最大の原因になります。

この回り込みを「ここで終わり！」と強制的に解除するのがclearプロパティです。特に、左右どちらのフロートもリセットできるbothは、初心者の方が最も多用する非常に便利な設定です。これを使うことで、次のブロック要素が重なることなく、正しい位置（フロート要素のすぐ下）から表示されるようになります。


<style>
    .sample-container {
        padding: 10px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
    }
    .box-blue {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #add8e6;
        margin: 5px;
        text-align: center;
        line-height: 100px;
    }
    .box-pink {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #ffc0cb;
        margin: 5px;
        text-align: center;
        line-height: 100px;
    }
    /* 回り込みを解除するクラス */
    .clear-fix {
        clear: both;
    }
</style>

<div class="sample-container">
    <div class="box-blue">左に浮く箱</div>
    <div class="box-pink">次に浮く箱</div>
    
    <div class="clear-fix"></div>
    
    <p>この文章は、clearプロパティによって回り込みが解除されたため、上のボックスと重ならずに正しい位置から始まっています。プログラミング未経験の方でも、この「空のdivタグにclearを入れる手法」を覚えるだけで、Webサイトの崩れを劇的に減らすことができます。</p>
</div>

ブラウザ表示

3. clearfixとは何か？float崩れをまとめて防ぐ方法

clearfixは、親要素に対してfloatの影響を自動でリセットし、親要素の高さを正しく表示させるテクニックです。floatを使った古いレイアウトで必須だった方法で、CSSだけで簡単に対応できます。


<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }
    .float-box {
        float: left;
        width: 120px;
        height: 80px;
        margin-right: 10px;
        background-color: skyblue;
    }
</style>

<div class="clearfix">
    <div class="float-box">ボックス1</div>
    <div class="float-box">ボックス2</div>
</div>
<p>clearfixを親要素に追加すると、floatされたボックスの下に正しい高さが確保されます。</p>

ブラウザ表示

4. clearfixを使うメリットと古いレイアウトの理解

clearfixを使うことで、floatを利用した古いレイアウトでもボックスの高さ消失や重なりを防げます。初心者がfloatやclearの動きを理解するのに役立ちます。現在はフレックスボックスやグリッドレイアウトが主流ですが、clearfixの仕組みを知っておくと、古いウェブサイトの修正やメンテナンスに便利です。

clearfixは「floatで崩れやすいレイアウトを安全に保つCSSテクニック」と覚えておくと良いでしょう。

まとめ

ここまで、CSSのfloatによるレイアウト崩れと、その対処法としてのclear、そしてclearfixについて詳しく見てきました。floatは、画像の回り込みや横並びレイアウトを簡単に実現できる便利なプロパティですが、親要素の高さが消えてしまうという特徴があります。この仕組みを理解していないと、背景色が表示されない、次の要素が重なってしまうなど、見た目に大きな影響が出てしまいます。

まず重要なのは、floatされた要素は通常の文書の流れから外れる、という点です。その結果、親要素は中身がないと判断され、高さがゼロになってしまいます。この状態を放置すると、HTML構造自体は正しくても、CSSの影響でレイアウトが破綻して見える原因になります。初心者が最初につまずきやすいポイントでもあり、なぜこうなるのかを知ることが、CSS理解の第一歩と言えます。

clearプロパティは、floatの影響を受けないようにするための基本的な方法です。clear bothを指定した要素を挿入することで、floatされた要素の下に通常の流れを取り戻すことができます。ただし、この方法はHTMLに余分な要素を追加する必要があり、構造が少し冗長になりがちです。小規模なレイアウトでは問題ありませんが、ページ全体で多用すると管理が大変になります。

そこで登場するのがclearfixです。clearfixは、疑似要素を使って親要素自身にclearの役割を持たせるテクニックです。HTMLを汚さず、CSSだけでfloatによる高さ消失を防げるため、長年にわたって多くのウェブサイトで使われてきました。特に、古いサイトやfloatベースで組まれたレイアウトを理解するうえでは、欠かせない知識です。

現在のウェブ制作では、flexboxやgridといった新しいレイアウト手法が主流になっています。しかし、既存のコードを読む場面や、過去のHTMLやCSSを修正する場面では、clearfixが使われているケースは今でも少なくありません。そのため、float、clear、clearfixの関係を理解しておくことは、実務においても大きな意味があります。

まとめとしてのサンプルプログラム


<style>
.container {
    border: 2px solid #333;
    padding: 10px;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}
.item {
    float: left;
    width: 100px;
    height: 80px;
    margin-right: 10px;
    background-color: lightgreen;
}
</style>

<div class="container">
    <div class="item">項目A</div>
    <div class="item">項目B</div>
</div>
<p>clearfixを使うことで、親要素の枠線が中のボックスを正しく包み込みます。</p>

ブラウザ表示

先生と生徒の振り返り会話

生徒

「floatって、並べるだけの便利なものだと思っていましたが、親の高さが消える理由がやっと分かりました」

先生

「仕組みが分かると、レイアウトが崩れても慌てずに対応できますね。なぜ起きているのかを考えるのが大切です」

生徒

「clearで直す方法と、clearfixでまとめて解決する方法の違いも理解できました」

先生

「その理解があれば、古いCSSコードを見ても怖くありません。今後はflexboxと比べながら使い分けていきましょう」

生徒

「基礎を知っていると、新しい技術も安心して学べる気がします」