画像の回り込みの色々

画像の回り込みについて。
回り込みと言うのは下の画像のように画像の横に文字などがある状態です。
方法はスタイルシートであったりHTMLであったり様々ですが、今回は記事内の話にしぼるのでHTMLのほうを。
（文字だけでなく他にも色々置けますし、画像以外にも指定できます）


回り込み自体は記事の投稿をＨＴＭＬエディタで行っていればかなり簡単にできるものです。（そういうボタンがついてますので）
で、じゃあ問題ないじゃないと思われがちなんですけども、実はこの回り込みと言う物は
解除する必要があるのです。
回り込みは簡単にできるのに、解除を簡単に行うボタンがついていなかったので少々ご説明を。

まずは回り込みを解除しなかった場合に起こりえる問題を。
HTMLエディタの「雛形」を利用して「回り込み解除のタグを追加しなかった場合」です。

普通に使用するとソースはこうなっています。
オレンジ色が回り込みの指定です。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here

実際の表示はこんなかんじ。

記事内の文字の量が少ないとこうなります。画像の下にまで文字があふれ出る状態であれば記事枠からはみ出すといった状況にはなりませんが、画像とちょっとした言葉を…なんて場合にはこうなります。

で、これに回り込みの解除タグを追加するとどうなるか。

赤文字が回り込みを解除するための部分です。
<img width="100" height="100" align="left" alt="" style="margin-right: 10px;" />
<h3>Type the title here</h3>
Type the text here<br clear="all">

スッキリ枠に収まります。

解除タグを追加するかしないかで、他が同じでも見た目にこれだけの差がでてくる事になります。
<br clear="all">はHTML4.01では非推奨要素とされていますが、使えるものは使っていったほうが良いとわたくしは思っております。
また、これ以外にもスタイルシートで回り込みを解除する方法なども色々ありますので、非推奨要素が気になる方はそっちのほうも調べてみるといいかもしれません。
記事に画像を多く扱われる方で記事のレイアウトにもこってみたいと言う方はこの「回り込みの解除」も覚えておくと思い通りのレイアウトに近づけるのではないかと思います（'-'*