どうも、今年度社会人となってWEB製作会社に勤め始めましたよっしぃーです。

学生やWEB製作を始めたばかりという人に役立つような情報を載せていければなぁと思います。

文字ブロックの横にimgをフロートさせたりする時に、画像に回り込みが起きて文字の塊の中に画像が入ってしまう経験がありませんか？
その際、文字は文字、画像は画像と左右に分ける方法をご紹介します。

私が行っている一番楽だと思う方法は、floatさせた要素に回りこんでしまうものに

overflow: hidden;

をかけています。

See the Pen imgなどfloatさせた時便利 by よっしぃー (@yoshiiiiie) on CodePen.


overflow:hiddenは、その要素のはみ出した部分を見えなくするcssですが、その際に対象にする要素内以外、つまりその外の要素は中の要素と干渉できなくします。
結果としてfloatさせた要素の回り込みを解消することができます

この効果は他のことにも応用できて、
div内の要素を全てfloatをかけた際、floatはその要素の高さを失う性質があるので、
その下の要素と重なってしまうのですが、
その解消方法としてclearfixをつかう、(clearfixって？)
またはoverflow: hidden;をつかうなどがあります。

外の要素と干渉しない性質をうまく利用した例ですね。

使い勝手がよいので他の使い道もあるかもしれません
また面白い使い方があれば紹介していこうと思います。