Bloggerで画像の横に文字列を流し込むとき

Google Bloggerで画像を右か左に配置すると、画像の左右に文字列を流し込む事が出来ます。
例えば、これは画像を右に配置しています。こんな風に画像の左側に文字が回り込んで表示されます。

こちらは画像を左に配置しています。
画像を左に配置しているので、文字は画像の右側に回り込みます。
文字が長くて、画像の高さに収まらないときは、こんな風に画像の下に回り込んで文字が表示されます。

しかし、画像の横に置きたい文字と下に置きたい文字がある時に、この流し込みを止めたくてもうまく止まらない時があります。例えば下のように配置したい時です。
 実は上の画像はBloggerで編集中の画面です。しかしこれを公開して実際にブラウザでみると上の画像のようにうまく見える時もありますが、下の画像のように下に表示したい文字が横に回り込んだり、画像の下に余分な空行が出来たりすることがあります。
実は上をBloggerの編集画面の[HTML]でみると、下のように<br/>で行を増やしています。 こんな風に[Enter]キーで、空行を作って位置を合わせると期待したように見えなくなります。
次に下の画像ですが、こちらは下に表示したい文字が横に回り込んだり、画像の下に余分な空行が出来ていません。
実は上をBloggerの編集画面の[HTML]でみると、複数の<br/>で空行を作って調整しているのではなく、下のように画像の横と下に表示する文字を、<br style="clear: both;" /> で区切っています。
こんな風に<br style="clear: both;" />で区切ると、その後の文字が画像の横に回り込まなくなります。
この時に、横に回り込む文字の最後に<br/>を忘れないでください。<br/>を省略すると、保存・公開したり、Bloggerの編集を[HTML]から[作成]に変えると<br style="clear: both;" />が消えてしまいます。