この記事は人間が書きました

はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

`float` プロパティ

float は、Flexbox や Grid が登場する前にレイアウトの主流だったプロパティです。元々は、その名の通り要素を「浮かせて」、画像などにテキストを回り込ませるために使われました。

`float` プロパティの問題点

float を指定すると、その要素は親要素から「浮いた」状態になり、親要素は float させた要素の高さを認識できなくなります。これにより、親要素の背景が途切れたり、レイアウトが崩れる原因となります。

`clearfix` による解決

この問題を解決する有名なテクニックが「clearfix」です。float を指定した要素の親要素に特別なスタイルを適用することで、高さを正しく認識させることができます。

まとめ

	`clearfix` なし	`clearfix` あり
親の高さ	中身のテキストの高さだけになる	浮いた画像 + テキストの全体の高さになる
ボーダー	画像を無視して縮む	全体を正しく囲む

作成したコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>フロントエンド1000本ノック 0030</title>
    <style>
      .clearfix::after {
        content: "";
        display: block;
        clear: both;
      }
    </style>
</head>
<body>
    <main>
      <h1>float プロパティの挙動</h1>

      <div style="border: 1px solid #000; width: 400px;" class="clearfix">
        <img src="img/profile.jpg" alt="プロフィール画像" style="float: left; width: 200px; height: 200px;">
        <p>ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。ここに長文が入ります。</p>
      </div>
    </main>
    <footer>
      <p>Copyright 2025</p>
      <p>フロントエンド1000本ノック</p>
    </footer>

</body>
</html>