HTML テキストの回り込み

ここでは画像の右に文章を表示させる、テキストの回り込みを実装する。

はじめに

<h2>カエル</h2>
<p><img src="カエルの画像のURL" class="frog-photo">休憩中のカエル。。。</p>
 
<!---->  
<h2 class="clear">カエルについて</h2>  
<p>カエルはこどものころ、オタマジャクシで、、、</p>

「カエルの画像」の下に表示される文章「休憩中のカエル。。。」を「カエルの画像」の右に表示(テキストの回り込み)するには、CSSで次のようにする。

.frog-photo{
  float: left;
}

floatプロパティは、親要素のボックス(< p > ～ < /p > )の左上、または右上に配置され、後続の要素(テキスト)は、その周りを回り込むように配置される。

回り込みの解除

しかし、これだと次の「カエルについて」以降もテキストの回り込みがされる。そこで回り込みを解除するため、CSSで

.clear{
  clear: both;
}