この記事は人間が書きました
はじめに
こんにちは、赤神です！
この記事は、「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>