CSSのfloatを使った回り込みで下には回り込ませない方法
ウェブル さんで 「CSS で画像の下に文字を回り込ませない方法」 が紹介されていたので、メモメモ φ(..)。
例えば CSS の float を使って画像に文章を回り込ませるレイアウトをした場合、文章の量によっては下の例のように、画像の下にも文章が流れ込んでしまします。
しかしこれでは文章が読みにくいので、次の例のように画像の下には文章が流れ込まないようにしたいわけです。
そのためには、回り込む文章をブロック要素(DIVタグとか Pタグ)で囲んで、その要素のスタイルシートに “overflow: hidden;” を指定すればOKです。
ソースのサンプルは以下の通りです。
参照リンク
・CSS で画像の下に文字を回り込ませない方法 | ウェブル
・float の問題を overflow で解決 - lucky bag