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崩れをまとめて防ぐ方法

プログラミングを始めたばかりの方が最初につまずきやすいのが、CSSの「float（フロート）」を使ったレイアウト崩れです。 floatを指定した要素は、親要素から浮いたような状態になるため、親要素が中の要素を認識できず、「高さが0」になってしまう現象が起こります。

この「親要素が消えた（高さがなくなった）ように見える問題」を一瞬で解決する魔法のようなテクニックがclearfix（クリアフィックス）です。現在はFlexboxなどの新しい手法もありますが、既存サイトの修正や特定のデザインでは今でも必須の知識です。


<style>
    /* clearfixの魔法の設定 */
    .clearfix::after {
        content: "";        /* 空の要素を作る */
        display: block;      /* ブロック要素にする */
        clear: both;         /* 左右のfloatの影響をリセットする */
    }

    /* レイアウトの装飾用 */
    .parent {
        background-color: #f0f0f0;
        border: 2px solid #333;
        padding: 10px;
    }
    .float-box {
        float: left;
        width: 150px;
        height: 100px;
        margin-right: 10px;
        background-color: #3498db;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="parent clearfix">
    <div class="float-box">ボックス1</div>
    <div class="float-box">ボックス2</div>
</div>

<p style="margin-top: 15px;">
    ※親要素（グレーの枠）に「clearfix」というクラス名をつけるだけで、中の青いボックスに合わせて枠が正しく広がります。
</p>

ブラウザ表示

使い方は非常にシンプルです。CSSで.clearfix::afterの設定を一度記述しておけば、あとはレイアウトが崩れそうな親要素にclass="clearfix"を追加するだけ。これにより、空の要素が自動で背後に生成され、floatを打ち消して（clearして）くれます。初心者の方でも、まずは「floatを使ったら親要素にclearfix」とセットで覚えておけば、意図しない表示崩れに悩まされることはなくなります。

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

ウェブ制作の現場では、要素を横に並べるために「float」プロパティが長年使われてきました。しかし、floatを使うと親要素が子の高さを認識できなくなり、背景が消えたり、下の要素が上に重なってしまう「親の高さ消失（浮き上がり現象）」が発生します。

この問題を解消するための定番テクニックが「clearfix（クリアフィックス）」です。現在はFlexboxやCSS Gridが主流ですが、既存サイトの保守（メンテナンス）や、過去のコードを理解するためには必須の知識です。初心者の方でも、floatでレイアウトが崩れた際に「魔法の1行」として重宝するはずです。

具体的なサンプルコード（floatによる崩れと解決策）

以下のコードでは、子要素を左右に並べた際に親要素（グレーの背景）が消えてしまう問題と、clearfixを適用して正常に表示される様子を比較しています。


<style>
    /* clearfixの設定 */
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    /* レイアウトの装飾 */
    .parent {
        background-color: #f0f0f0;
        padding: 10px;
        border: 2px dashed #999;
        margin-bottom: 20px;
    }
    .child-left {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #ffcccc;
        margin-right: 10px;
    }
    .child-right {
        float: left;
        width: 150px;
        height: 100px;
        background-color: #ccffcc;
    }
    .text-box {
        padding: 5px;
        font-weight: bold;
    }
</style>

<div class="mb-4">
    <p>【1】clearfixなし（背景が消えて、枠線が潰れている状態）</p>
    <div class="parent">
        <div class="child-left"><img src="/img/sample150-100.jpg" alt="サンプル画像"></div>
        <div class="child-right">
            <div class="text-box">右側の要素</div>
        </div>
    </div>
</div>

<div class="mb-4" style="clear: both;">
    <p>【2】clearfixあり（親要素が子要素を正しく包んでいる状態）</p>
    <div class="parent clearfix">
        <div class="child-left"><img src="/img/sample150-100.jpg" alt="サンプル画像"></div>
        <div class="child-right">
            <div class="text-box">右側の要素</div>
        </div>
    </div>
</div>

ブラウザ表示

clearfixを使わない場合、子要素が浮いた状態になり、親要素の高さが「0」になってしまいます。これによって背景色や枠線が正しく表示されません。classに「clearfix」を1つ追加するだけで、CSSの擬似要素（::after）が自動的に「回り込みの解除（clear: both）」を行い、レイアウトを安定させてくれます。

まとめ

ここまで、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と比べながら使い分けていきましょう」

生徒

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