CSSでfloatとclearを使った古いレイアウトの作り方を初心者向けに解説
先生と生徒の会話形式で理解しよう
生徒
「先生、ウェブサイトのレイアウトで要素を左右に並べたい場合、どうやってCSSで作るんですか？」
先生
「昔の方法ではfloatを使って要素を左や右に寄せるやり方があります。さらに、次の要素がfloatの影響で重ならないようにclearを使います。」
生徒
「floatやclearって少し難しそうです。具体的にどういう動きになるんですか？」
先生
「順を追って、基本の使い方を見ていきましょう。」
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の影響を解除する方法
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を使った古いレイアウトの特徴と注意点
floatレイアウトは、横並びや文章回り込みの調整に便利ですが、いくつか注意点があります。
- floatを使うと親要素の高さが0になりやすい（高さが潰れる問題）
- clearを使わないと次の要素がfloatの横に回り込んでしまう
- 複雑なレイアウトにはフレックスボックスやグリッドレイアウトのほうが簡単で管理しやすい
古いレイアウトではfloatとclearを駆使して横並びや回り込みを作っていましたが、現在ではフレックスボックスやグリッドレイアウトが主流です。とはいえ、floatとclearの仕組みを理解することは、古いウェブサイトを修正したり、基本的なCSSの動きを理解するために重要です。
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>
