CSSでfloatとclearを使った古いレイアウトの作り方を初心者向けに解説

1. floatとは何か？要素を左右に寄せる仕組み

1. floatとは何か？要素を左右に寄せる仕組み

CSSのfloatは、ボックスを左や右に寄せて文章や他の要素が回り込むようにするプロパティです。例えば、画像を文章の左側に配置して、テキストが右側に回り込むデザインを作るときに使われます。floatを使うと、ブロック要素でも横並びが可能になります。

<style>
    .float-left {
        float: left;
        width: 150px;
        height: 100px;
        background-color: lightblue;
        margin-right: 10px;
    }
</style>

<div class="float-left">左に寄せたボックス</div>
<p>このテキストはボックスの右側に回り込みます。floatを使うと、このように文章や他の要素がボックスの周りに配置されます。</p>

2. clearとは？floatの影響を解除する方法

2. clearとは？floatの影響を解除する方法

floatを使った後、次のブロック要素がfloatの横に回り込むことがあります。これを防ぐにはclearを使います。clearは、「左側や右側にfloatがある場合、その影響を受けずに新しい行から表示する」という意味です。

<style>
    .clear-both {
        clear: both;
        background-color: lightgreen;
        padding: 10px;
    }
</style>

<div class="clear-both">このボックスはfloatの下から表示されます</div>

3. floatとclearを使った古いレイアウトの特徴と注意点

3. floatとclearを使った古いレイアウトの特徴と注意点

floatレイアウトは、横並びや文章回り込みの調整に便利ですが、いくつか注意点があります。

• floatを使うと親要素の高さが0になりやすい（高さが潰れる問題）
• clearを使わないと次の要素がfloatの横に回り込んでしまう
• 複雑なレイアウトにはフレックスボックスやグリッドレイアウトのほうが簡単で管理しやすい

古いレイアウトではfloatとclearを駆使して横並びや回り込みを作っていましたが、現在ではフレックスボックスやグリッドレイアウトが主流です。とはいえ、floatとclearの仕組みを理解することは、古いウェブサイトを修正したり、基本的なCSSの動きを理解するために重要です。

4. 実践例：左右に並べたボックスと回り込み

4. 実践例：左右に並べたボックスと回り込み

<style>
    .box1 {
        float: left;
        width: 120px;
        height: 80px;
        background-color: skyblue;
        margin-right: 10px;
    }
    .box2 {
        float: left;
        width: 120px;
        height: 80px;
        background-color: lightcoral;
        margin-right: 10px;
    }
    .clearfix {
        clear: both;
    }
</style>

<div class="box1">左ボックス</div>
<div class="box2">右ボックス</div>
<div class="clearfix"></div>
<p>この段落はボックスの下から表示されます。clearを使うことで、floatの影響を解除できます。</p>

5. clearfixを使って親要素の高さが潰れる問題を解決する

5. clearfixを使って親要素の高さが潰れる問題を解決する

floatを使ったレイアウトでは、子要素をすべてfloatで配置すると、親要素が中身の高さを認識できなくなることがあります。これを「親要素の高さが潰れる」と表現します。見た目では子要素が表示されているのに、親要素の背景色や枠線が正しく表示されないことがあり、初心者が戸惑いやすいポイントです。

この問題を解決する代表的な方法が、clearfixと呼ばれる書き方です。clearfixでは、親要素の最後に見えない要素を追加したような状態を作り、その要素にclearを指定してfloatの影響を解除します。古いウェブサイトでは非常によく使われている方法なので、既存のCSSを読むときにも役立ちます。

<style>
    .clearfix::after {
        content: "";
        display: block;
        clear: both;
    }

    .float-box {
        float: left;
        width: 120px;
        height: 80px;
        background-color: lightblue;
        margin-right: 10px;
    }

    .parent-box {
        background-color: #f5f5f5;
        border: 2px solid #999;
        padding: 10px;
    }
</style>

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

この例では、親要素にclearfixクラスを付けています。clearfixのafter疑似要素にclearのbothを指定することで、左右どちらのfloatも解除され、親要素が子要素の高さを正しく認識できるようになります。これによって、背景色やborderも子要素全体を囲むように表示されます。

現在ではFlexboxやGridを使うことで、このようなclearfixを使わずに横並びを作れる場合が多くなっています。しかし、昔に作られたホームページや企業サイトではclearfixが残っていることもあるため、floatと一緒に覚えておくと古いCSSの修正がしやすくなります。

6. floatのleftとrightを使って左右に要素を配置する

6. floatのleftとrightを使って左右に要素を配置する

floatにはleftだけでなくrightも指定できます。floatのleftを使うと要素は左側に寄り、floatのrightを使うと要素は右側に寄ります。この仕組みを利用すると、ひとつの親要素の中で左側と右側に別々のボックスを配置できます。

例えば、古いウェブサイトでは左側にロゴやメニュー、右側にお問い合わせボタンや補足情報を配置するときにfloatのleftとrightが使われることがありました。現在のFlexboxであればjustify-contentなどで簡単に作れますが、floatを使った既存コードでは今でも見かける構成です。

<style>
    .left-area {
        float: left;
        width: 45%;
        background-color: lightblue;
        padding: 15px;
        box-sizing: border-box;
    }

    .right-area {
        float: right;
        width: 45%;
        background-color: lightpink;
        padding: 15px;
        box-sizing: border-box;
    }

    .clear-area {
        clear: both;
    }
</style>

<div class="left-area">
    左側に配置されたボックス
</div>

<div class="right-area">
    右側に配置されたボックス
</div>

<div class="clear-area"></div>

<p>この文章は左右のボックスの下に表示されます。</p>

このサンプルでは、left-areaにfloatのleftを指定し、right-areaにはfloatのrightを指定しています。その結果、ひとつのボックスは左側、もうひとつのボックスは右側へ配置されます。両方の幅を四十五パーセントにしているため、中央には少し空間が残るレイアウトになります。

その下にはclearのbothを指定した要素を置いています。このclearがない場合、後ろの文章が左右どちらかのボックスの横に回り込んでしまうことがあります。floatで左右に要素を配置したあとには、どこでfloatの影響を終わらせるかを意識することが重要です。

7. floatとFlexboxの違いを理解して使い分ける

7. floatとFlexboxの違いを理解して使い分ける

floatは昔から使われているCSSのプロパティですが、現在のウェブ制作では、ページ全体のレイアウトや複数の要素を横並びにするときにFlexboxを使うことが一般的です。floatは本来、画像の周囲に文章を回り込ませるような用途に向いている仕組みで、複雑なレイアウトを作るための専用機能ではありません。

そのため、floatだけで複数のボックスを横並びにすると、親要素の高さが潰れたり、clearを追加する必要があったりするなど、管理するCSSが増えやすくなります。一方、Flexboxでは親要素にdisplayのflexを指定するだけで子要素を横に並べることができ、floatの解除を考える必要もありません。

<style>
    .flex-container {
        display: flex;
        gap: 10px;
    }

    .flex-box {
        width: 120px;
        height: 80px;
        background-color: lightgreen;
        padding: 10px;
        box-sizing: border-box;
    }
</style>

<div class="flex-container">
    <div class="flex-box">ボックス1</div>
    <div class="flex-box">ボックス2</div>
</div>

<p>Flexboxではclearを使わなくても、この文章はボックスの下に表示されます。</p>

この例では、floatを使わずにdisplayのflexを指定して横並びを作っています。Flexboxでは、子要素を横に並べるためにfloatのleftを一つずつ設定する必要がなく、clearで回り込みを解除する必要もありません。そのため、新しくウェブページを作る場合は、Flexboxのほうがコードを整理しやすくなります。

ただし、floatが不要になったわけではありません。文章の中に画像を配置して、その周囲に文字を回り込ませたい場合などでは、floatの仕組みが適していることがあります。また、古いウェブサイトや長年運用されているシステムではfloatレイアウトが残っていることも多いため、保守や修正を行うにはfloatとclearの理解が必要です。

CSS初心者は、floatは左や右へ寄せて周囲の要素を回り込ませる仕組み、clearはその回り込みを解除する仕組みと覚えておくと分かりやすいでしょう。そして、新しい横並びレイアウトではFlexboxやGridを使うという違いを理解しておけば、古いCSSと現在のCSSの両方に対応しやすくなります。

まとめ

まとめ

今回の解説では、CSSの基本でありながら非常に奥が深いfloat（フロート）とclear（クリア）を使ったレイアウト手法について学びました。現代のWeb制作現場では、Flexbox（フレックスボックス）やCSS Grid（グリッドレイアウト）が主流となっていますが、既存の古いサイトの保守運用や、画像に対するテキストの回り込みといった本来の目的においては、今でもこのfloatプロパティが欠かせません。

floatプロパティの最大の特徴は、指定した要素を通常の文書の流れから浮かせ、左右のいずれかに寄せることで、後続の要素をその空いたスペースに回り込ませる点にあります。しかし、この「浮かせる」という挙動が、初心者の方を悩ませる「親要素の高さがなくなる（高さが潰れる）現象」を引き起こす原因にもなります。これを解決するために不可欠なのがclearプロパティです。

CSS floatレイアウトをマスターするためのポイント

floatを使用したコーディングを行う際は、以下の3つのポイントを常に意識することが重要です。

• floatプロパティを適用した要素には必ずwidth（幅）を設定する： 幅を指定しないと、中身のコンテンツに合わせて幅が極端に狭くなったり、予期せぬ挙動をしたりすることがあります。
• 回り込みを解除するタイミングを見極める： floatをかけたままにすると、その後のコンテンツがすべて回り込んでしまい、デザインが崩れる原因になります。適切な場所にclearプロパティを持つ要素を配置しましょう。
• clearfix（クリアフィックス）の概念を理解する： 今回のサンプルでは空のdivタグにclearを指定しましたが、実務では擬似要素（::after）を使用して、HTMLを汚さずに回り込みを解除する手法が一般的です。

具体的な応用サンプルプログラム

ここでは、実務でもよく見かける「画像とテキストを左右に並べ、さらにその下に続くコンテンツを正常に配置する」実践的なコードを紹介します。サイトのプロフィール紹介や、ニュース記事の抜粋一覧などでよく使われる構造です。

<style>
.article-container {
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.thumbnail-img {
float: left;
width: 150px;
height: 100px;
margin-right: 15px;
border: 2px solid #333;
}
.article-content {
/* テキストが画像の下に回り込まないように調整する場合も多いですが、
今回はfloatの基本的な回り込み挙動を確認します */
}
.clear-point {
clear: both;
border-top: 1px dashed #ccc;
margin-top: 15px;
padding-top: 10px;
}
</style>

<div class="article-container">
<img src="/img/sample150-100.jpg" alt="サンプル画像" class="thumbnail-img">
<div class="article-content">
<h4 style="margin-top:0;">Webデザインの基礎：floatを学ぶ</h4>
<p>floatプロパティを使うと、このように画像の右側に文章を回り込ませることができます。ブログの記事一覧画面や、プロフィール欄などで非常に重宝するテクニックです。画像の余白（margin）を調整することで、読みやすいレイアウトになります。</p>
</div>
<div class="clear-point">
<p>ここから下の文章は、clear: both;を適用しているため、画像の回り込みの影響を受けずに、新しい行として表示されます。これがレイアウトの安定には欠かせません。</p>
</div>
</div>

上のコード例では、.thumbnail-imgに対してfloat: left;を適用し、画像とテキストを横に並べています。そして、.clear-pointというクラスにclear: both;を指定することで、それ以降の要素が画像の下側から始まるように制御しています。もしこのclearがないと、記事の本文が短い場合に、下の要素まで画像に重なってしまう可能性があります。

レスポンシブデザインにおけるfloatの役割

現在はスマホ対応が当たり前になっていますが、floatはレスポンシブデザインとの相性も考え方次第で武器になります。例えば、PCサイズではfloat: left;で横並びに見せ、スマホサイズ（画面幅が狭い時）にはメディアクエリを使用してfloat: none;に書き換えることで、要素を縦並びに解除するといった制御が可能です。

最近のモダンブラウザではFlexboxが推奨されますが、古いIE（Internet Explorer）などへの対応が求められる保守案件や、特定のメールマガジン用HTML作成などでは、floatの知識が決定的な差となります。「なぜ横に並ぶのか」「なぜ高さが消えるのか」という理屈を理解しておくことで、トラブルシューティングの能力が飛躍的に向上します。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSのfloatとは何ですか？初心者にも分かりやすく教えてください。

CSSのfloatは、要素を左側や右側へ配置し、その周囲に文章や他の要素を回り込ませるためのプロパティです。昔のWebサイト制作では横並びレイアウトを作るためによく使われていました。現在ではFlexboxやGridが主流ですが、古いサイトの修正やCSSの基礎を理解するためにfloatの仕組みを学ぶことはとても重要です。