画像に文字を回り込ませる「float」プロパティの使い方と注意点
10年ぐらい前のお話になりますが、昔は要素を横並びにするのに「float」というプロパティが使われていました。
今ではとても便利な「Flexbox」「グリッドレイアウト」があるためあまり使われなくなったプロパティですが、「画像に文字を回り込ませる」といった表現をする時は今でも使われているプロパティです。
※テキストを回り込ませるのは現在「float」でしかできません
ここでは、その「float」プロパティの特徴と使う時の注意点について解説していきます。
「float」プロパティの特徴
「float」プロパティは名前にもあるように「要素を浮かせる」プロパティで、対象となる要素に「float:left;」を付けると「浮かせて左寄せ」に、「float:right;」を付けると「浮かせて右寄せ」になります。
「float:値;」を付けた要素に続く次の要素は、「float:値;」の付いた要素を避けるように続く性質があるため、次に続く要素にも同じ「float:値;」を付けることで結果的に複数の要素を横並びにすることができます。（昔はこれで横並びのレイアウトを設定していました）
「左寄せ」ですが左側にすでに「浮き上がった要素」があるため横に並んでいきます。
「float: 値;」でテキストを回り込ませる
十分なテキスト量があり、「float」をつかってテキストに回り込ませると、このようなレイアウトになります。
画像を左寄せ
画像を右寄せ
ただしテキスト量が少ない場合、下の図のようになだれ込んできたみたいになってしまいます。
その原因は、「float:値;」が付いていない要素のエリア（ここではテキスト）にありますので、以下のコードで説明していきます。
HTML
<div class="float-item">
<h3>解除しなかった場合</h3>
<div class="img02">
<img src="images/menu02.jpg" alt="">
</div>
<div class="float-text">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="float-item">
<h3>解除しなかった場合</h3>
<div class="img03">
<img src="images/menu03.jpg" alt="">
</div>
<div class="float-text">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
CSS
.float-item {
margin-bottom: 50px;
}
/* floatで回り込み */
.float-item .img02 {
width: 300px;
float:left;
margin: 15px;
}
.float-item .img03 {
width: 300px;
float:right;
margin: 15px;
}
「float」で浮き上がった画像のエリアは無視され、テキスト部分の高さがエリアの高さになります。
※それでも避けて回り込むのが「float」の特徴です。
次に続く要素は、直前の要素の高さを基準に配置されるため、このようになだれ込んだように配置されます。
※ただし、ねらってこのような配置にする場合は問題ありません
「float」状態をリセット（回り込みの解除）する「clear: both;」
「float」は上記のような「要素のなだれ込み」が起こることがよくあります。
この「なだれ込み」が起こらないようにするには、「float」の状態をやめたいところでCSSの「clear: both;」を設定することで「float」状態がリセット（回り込みの解除）され、なだれ込みが起こらなくなります。
HTML
<div class="float-item">
<h3>解除した場合</h3>
<div class="img02">
<img src="images/menu02.jpg" alt="">
</div>
<div class="float-text">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
<div class="clear">ここに「clear:both;」を入れて回り込みを解除</div>
<div class="float-item">
<h3>解除した場合</h3>
<div class="img03">
<img src="images/menu03.jpg" alt="">
</div>
<div class="float-text">
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>
</div>
CSS
.clear {
clear: both;
}
ここでは<div>にクラス名「clear」を付け、そこに対して「clear: both;」を適用させています。
そうすることで「float」が解除され、次の要素がなだれ込まなくなります。
※ここではわかりやすくテキストを入れています
浮き上がりを利用した「float」ですが、今ではテキストの回り込みぐらいしか使い道はないでしょう。
ですが、「float」にしかできないことでもあるので、機会があれば一度使ってみてください。
