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>

まとめ

まとめ

今回の解説では、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の知識が決定的な差となります。「なぜ横に並ぶのか」「なぜ高さが消えるのか」という理屈を理解しておくことで、トラブルシューティングの能力が飛躍的に向上します。