まず、画像に対するテキストの回り込みを指定してみましょう。
画像は

これを使っていきます。

通常、画像を表示する<img>の後に改行をせずに文章を続けた場合、このようになります。

<img>タグ直後で改行した場合は、

こうですね。

ではfloat:leftを用いた場合はどうなるでしょうか。<img>内にstyle="float:left"を加えてみましょう。
「回り込み」がされて、このようになります。
そう、float:leftを加えると、画像を「左に」配置した状態で次のコンテンツが並べられていくんですね。文章は画像を左に置いたまま、このように表示されることになります。
「回り込み」を解除したい場合は改行の<br>にstyle="clear:left"と加えることで解除されます。
ここでは、『〜表示されることになります。<br style="clear:left" />』と書いています。

ではfloat:rightでは。<img>内にstyle="float:right"を加えてみましょう。
このようになります。
単純にfloat:leftとは逆に、画像が「右に」配置されるんですね。文章は画像を右に置いたまま、このように表示されていくことになります。
「回り込み」を解除したい場合は改行の<br>にstyle="clear:right"と加えることで解除されます。ここでは、『〜表示されていくことになります。<br style="clear:right" />』と書いています。

ではfloat:noneでは。<img>内にstyle="float:none"を加えてみましょう。
これは「回り込み」を指定しない形になりますので、デフォルト（floatの記入なし）の場合と同じ表示がされます。

ちなみにclearを使って回り込みを解除しない場合は、
このように単純にひたすら文章が画像の横に並べられていきます。この例のために穴埋めの文章を書かねばならないので、ついでに少々宣伝をば。
ここで使ったロボットくんは別館の『ガリの書斎』のサイトキャラクターです。
上の画像のカメラ持ったのは、本当は『小吉写真館』のサイトキャラクターになる予定だった「しょーきち」。結局ボツにしちゃって日の目を見ることはなかったんですが、このプロパティを説明するのに画像が必要だったのでようやく登場させられることに。お時間あれば、是非『ガリの書斎』・『小吉写真館』もご覧になってくださいね。

……と、このようになります。