左上や右上にある画像をfloatタグを使って回り込ませるのはよく使いますが、
下記のように画像が左下・右下にあった場合はどう組めばいいかを紹介します！
画像が左下にある場合のソースです
See the Pen JOaxmx by ayumi (@tam-takayama) on CodePen.
解説します
- この場合「#left-box」で全体をつつんでいて、float解除の為に
overflow:hiddenをつけています。もし、はみ出させたい要素があるなどの理由でoverflow:hiddenが使えない場合はclearfixを使ってください。
参考記事:もう一度、「clearfix」について考えてみた。
- 画像の上に「.space」をのせているイメージです。縦幅によって画像が上下しますのでお好みで数字を変えてください。「%」単位でも可能です。
- 「.img」で上に乗っている「.space」のfloatの解除を
clear:bothでしています。 - 画像を右下に配置したい場合は、「.space」と「.img」の
floatをrightに変えてください。
まとめ
ブラウザやスマホの機種によって見栄えが代わり、画像の下に文字が回り込んだりする可能性があるので実機チェックの際はご注意ください！
「.img」の部分は、空divにしてCSSで縦幅指定してあげてbackgroundで#fffなどを指定すれば謎の空白を作ることもできます！（使い所がないかもしれませんが）