画像のfloatはスマートフォンでの見た目を考えて行いましょう

比較サンプル

画面サイズ1200px (パソコン)

スマホを意識したfloat

単なるfloat

どちらも同じように見えます。
元画像のサイズは300pxと仮定します。現在の画像はいずれも300pxの実寸で表示されている状態です。

画面サイズ768px (タブレット)

スマホを意識したfloat

単なるfloat

ここでもまだ変化は無いですね。

画面サイズ414px (大きめスマートフォン)

スマホを意識したfloat

単なるfloat

差が出ました。単なるfloatの方は画像横にテキストが4文字程度しか並びませんので非常に読みづらい。
iPhone6/7/8 plus系列がこのサイズです。

画面サイズ375px (小さめスマートフォン)

スマホを意識したfloat

単なるfloat

もう無理だろコレ。
iPhone6/7/8/X 系列がこのサイズです。

単なるfloatの方の状態になっている方が大変多いですね。
スマートフォンなるデバイスが存在しなかった頃に作成した記事ならば仕方がありません。
とはいえ今後は サイト第一評価はスマートフォンの見た目 なのですから(MFI)、これから書く記事はちゃんと見栄え良く配置した方が良いですよね。

画像はレスポンシブで掲載すべし

レスポンシブデザイン という意味ではないです。
テンプレートのレイアウト手法のことを指すのではなく
画像が柔軟に伸縮するようにしておけ という意味です。

ダメfloatの方のソースコードは概ね以下の通り。

<img src="アドレス" alt="拡張子前文字列" width="横" height="縦" style="float: left; margin: 0 15px 5px 0;">
<p>
本文内容
</p>

エディターのツールバーから入れるのとほぼ同じ形ですが、廃止要素・無駄な記述などは省いています(border属性及び末尾スラッシュ)
お情けでmarginを設定してありますが、ダメfloatの場合画像周りの余白に hspace属性 とか vspace属性 なんぞ使われていたりしますね。
とっくの昔に廃止されていますので、現在のweb標準(水準)に着いていこうという気持ちがあるのならば marginプロパティ を利用してください。

で、floatさせる手順としては img要素にstyle属性を追加して値に float: left; を書いて終わり(または right) みたいな。
それでは画像はレスポンシブにはなりません。

オッケーfloatの方のソースコードは以下の通り。

<img src="アドレス" alt="拡張子前文字列" width="横" height="縦" style="float: left; width: 50%; max-width: 300px; margin: 0 15px 5px 0;">
<p>
本文内容
</p>

画像のwidth指定

画像のwidth (ウィズ, 横幅)をちゃんと指定しておくこと。
ここを頑張ればスマホでも見易いfloatになります。

50% は 画面幅(記事幅)の参照です。
例えばパソコンでの記事幅が 800px であった場合には画像は 400px になり、残りの50%つまり半分はp要素(テキスト, 本文)への割当となります。
スマホ画面と記事幅はほぼ同等になりますので、400px の記事幅ならば 半分の200px が画像への割当になります。
つまり、
画像とテキストのバランスを考慮してソースを組む ことが大事ですね。
floatはそもそも「見た目の整いのために行う」場合がほとんどでしょうから、スマホでの整いを無視してはいけないね (´・ω・｀)

画像のwidthを40%にすればテキストは60%になりますし、30%にすればテキストは70%に。
そこは個人の好みですが、ともかく画像にまず widthを%で設定する こと。

エディターを利用した場合には自動で width属性及びheight属性 が付いてきますが、こちらはCSSプロパティではなくhtml属性で、元画像の縱橫サイズが記載されます。
これは特に消さなくてもOKというか、寧ろlazyloadなどを利用している場合は消さない方が良いと思います。
どのみちその数値は破棄されます。でなければ元画像より画面が小さくなったらはみ出してしまいます。
もちろんバカ正直にはみ出すテンプレートもありますが、そこは製作者がよっぽど配慮してくれている… と思う(私はしてますよ)
いずれにしろstyle属性を追加することでwidth/height属性の値は無効。style属性の値の強制力の方が強いからです。

画像のmax-width指定

widthプロパティを指定すると同時にmax-widthプロパティを設定しましょう。
例えば原寸横幅 300px の画像に 50% のwidthを指定したとします。
記事幅がパソコンで1000pxあった場合には半分ですから500pxですね。元画像300pxよりも大きい500px。
すると画像は拡大処理を受けることになり解像度が落ちます。
それを避けるために
画像横幅は50%、でも割当領域が300pxを超えたらそれ以上は大きくさせない。
というのがmax-widthの役割です。つまり 最大値設定 です。

レスポンシブでは widthプロパティとmax-widthプロパティの併用 が至る所で効力を発揮します。
ということで、style属性の値として

width: 50%; max-width: 300px;

を記載します。もちろん数値はお好みで。
実際のfloat適用要素の見た目とソースコードは以下のものです。

<div style="overflow: hidden;">
  <img src="アドレス" alt="サンプル" width="横" height="縦" style="float: left; width: 50%; max-width: 300px; margin: 0 15px 5px 0;">
  <p>
    本文
  </p>
</div>

float解除は親要素へのoverflow: hiddenが使いやすい

厳密にはfloatを「解除」するのではなく、浮いた要素に「高さを持たせる」という処理です。
他にもclearfixなどの手法がありますが、いずれにしろ旧来のような <br clear="all"> といったものはもう時代遅れなので使わないですね (´・ω・｀)
詳細は以下のページをご参照ください。

結局floatはどう解除するのが簡単なのか

float解除の仕方についてです。...

vanillaice000.blog.fc2.com

まとめ

具体的には「スマホの爆発的普及前(2010年以前？)」「html5勧告前(2014年以前)」の掲載内容についてはもう仕方が無いと思うんですよね。
しかし今後の対策はできるはずです。
気づいた時に始めなければいつまで経っても何も変わらない。

マジでもうスマホからめちゃくちゃ見辛いページとかいまだに有るんですよね。
なんでfloat使うかなぁ… (´-ε-｀;)
と思わせるページが(笑)
floatが悪いのではなくfloatを使いこなせていないのが悪いんだ、というわけで簡単な解消法のご紹介でした。