回り込みに関するスタイル

floatの役割

要素を左右に寄せて、文字や他の要素を回り込ませることができます。floatプロパティを適用された要素は、その親要素コンテンツ領域の「右上」または左上に配置されます。また、後続の要素は、floatが適用された要素を避けるように配置されます。

float:値

floatの値

clear:both

floatの左右どちらの回り込みも解除して、要素をその下に配置する指定です。floatを使う際、必要に応じて、後続に指定します。

画像を回り込ませる

画像を回り込ませるには、いくつかの方法があります。イメージ(画像)は、セレクタimgとして設定することができますので、img{float:left} と記述すると、画像が全て左へ回り込みます。ところが、そうしてしまうと、ドキュメント内の全ての画像が左へ回り込んでしまうことになってしまいますので、クラスセレクタ、あるいは複合セレクタを使って、特定の画像だけを回り込ませるように設定しましょう。

<p><img src="./images/dog.jpg" class="float_right"><p>

クラスセレクタを使って、特定の画像だけ回り込ませる

img.float_right {float: right;}

overflow:hidden

floatプロパティを適用した親要素は、高さを失い、子要素を包囲することができなくなります。後続に、clear:bothを充てることができない場合は、親要素に、overflow:hiddenを適用させる必要があります。(上記のサンプルの場合は、main(グレーのエリア)が親要素に該当します。)

floatを使ったサンプル①

全体を囲うボックス(親要素)にfloatを指定し、その中に、2つのセクション(猫と犬)を配置させています。親要素には、overflow:hiddenを指定しておきましょう。

floatを使ったサンプル②

練習してみましょう。

▶︎ https://cocohp.com/sample/float/sample.html

画像を回り込ませる際は、画像の周囲にテキストが接触しないように余白を設定しましょう。

整列やレイアウトに関するスタイルは、他にもあります。▶︎ 後編CSSを見る