CSSのclearfixとは？floatで崩れるレイアウトを防ぐ方法を初心者向けに解説
生徒
「先生、floatでボックスを左や右に並べると、親の高さが消えてレイアウトが崩れることがあります。どうしたらいいですか？」
先生
「それにはclearfix（クリアフロート）という方法を使います。clearfixを使うと、floatで崩れた親要素の高さを正しく表示できます。」
生徒
「clearfixって難しそうです。具体的にはどう書けばいいんですか？」
先生
「順を追って説明します。floatとclearの仕組みを理解してからclearfixを使うとわかりやすいです。」
1. floatでレイアウトが崩れる理由
floatを使うと、ボックスを左や右に寄せることができます。しかし、floatされた要素は親要素の通常の流れから外れるため、親要素の高さがゼロになってしまうことがあります。これを「floatによる高さ消失」と呼び、ウェブサイトのレイアウトが崩れる原因になります。
2. clearで崩れを回避する方法
floatの影響を受けないようにするには、clearプロパティを使います。clearにはleft、right、bothがあります。bothを使うと、左にも右にもfloatがある場合に影響を受けず、次のブロック要素が正しい位置に表示されます。
<style>
.box-left {
float: left;
width: 100px;
height: 80px;
background-color: lightblue;
margin-right: 10px;
}
.box-right {
float: left;
width: 100px;
height: 80px;
background-color: lightcoral;
}
.clear-both {
clear: both;
}
</style>
<div class="box-left">左ボックス</div>
<div class="box-right">右ボックス</div>
<div class="clear-both"></div>
<p>clear-bothを入れることで、この段落はボックスの下から表示されます。</p>
3. clearfixとは何か？float崩れをまとめて防ぐ方法
clearfixは、親要素に対してfloatの影響を自動でリセットし、親要素の高さを正しく表示させるテクニックです。floatを使った古いレイアウトで必須だった方法で、CSSだけで簡単に対応できます。
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.float-box {
float: left;
width: 120px;
height: 80px;
margin-right: 10px;
background-color: skyblue;
}
</style>
<div class="clearfix">
<div class="float-box">ボックス1</div>
<div class="float-box">ボックス2</div>
</div>
<p>clearfixを親要素に追加すると、floatされたボックスの下に正しい高さが確保されます。</p>
4. clearfixを使うメリットと古いレイアウトの理解
clearfixを使うことで、floatを利用した古いレイアウトでもボックスの高さ消失や重なりを防げます。初心者がfloatやclearの動きを理解するのに役立ちます。現在はフレックスボックスやグリッドレイアウトが主流ですが、clearfixの仕組みを知っておくと、古いウェブサイトの修正やメンテナンスに便利です。
clearfixは「floatで崩れやすいレイアウトを安全に保つCSSテクニック」と覚えておくと良いでしょう。
