画像を回り込ませるのではなく、単純に右寄せにしたい場合どのようにしたらよいでしょう。

テキストであれば「text-align: right;」で簡単にできると思います。

しかし、画像はこれでは言うこと聞かない。

回り込ませて並べたりする時は「align: right」や「float: right」を使いますが、こういった場合にはこれらは使いません。

ブロック要素とtableは「margin-left:auto」で右寄せできるのです。

ですのでimg要素ををブロック要素で囲みます。

ブロック要素とは「div・p・ul・li・dl」など。

つまり、

ブロック要素にの中に画像img要素を入れる。
その囲んでいるブロック要素に「margin-left: auto;」を指定

「margin-right」じゃないの？！と一瞬考えませんでしたか？

「margin-left:auto」とすることで、左側のスペースが目一杯広くなり、左側のスペースに押し込まれて画像imgが右寄せになるのです。
（ちょっとややこしいですよね、これがブロック要素の特性なんです）

通常（左寄せ）

右寄せ

HTML

<div class="box">
  <div class="img-wrap">
    <img src="hoge.jpg" alt="demo">
  </div>
</div>

CSS

.box {width: 100%; margin-left: auto;}
.img-wrap {margin-left: auto; width:257px;}

もしくは

img要素はインライン要素なのでdivでimg要素を囲んでmargin-left:autoを設定しても良いが
img自体にdisplay:blockをclass設定することで多少短いコーディングが可能となる。

HTML

<div class="box">
  <img src="hoge.jpg" alt="demo" class="img-right">
</div>

CSS

.box {width: 100%;}
.img-right {margin-left: auto; display:block;} 

例えば、

よくある代表挨拶などで最後に手書きのサイン画像を入れたりすることありますよね。

その場合、手紙のように右側に置くのが自然に見えます。

そういった時は左側に何もないので、この手法が手っ取り早く正確にできるのではないでしょうか。

「左側に何もないのに、画像を右側に寄せたい時」が必要な時に、有効な手段だと思います。