CSSのfloatを使って背景や枠線が付かないとか画像や文章がはみ出すなんて場合の対処法

サイトのデザインでCSSのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。

しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。

何とかならないかと考えながら対処法が見付かったので、纏めておきたい。

floatで背景や枠線が付かなければoverflowのhiddenも使おう

<div class="fbox">
<p>一文目<br>二文目<br>三文目<br>四文目</p>
<img src="画像URL">
</div>

.fbox {border:2px #00008b solid;background:#fffaf0;overflow:hidden;}
.fbox p {float:left;}
.fbox img {float:right;max-width:140px;}

floatを使うとコンテンツが背景や枠線を指定した親ボックスのdivなどから浮き上がって抜け出してしまうから何も入ってないような感じにデザインが崩れるんだ。

親ボックスのdivなどにoverflow（超過）のhiddenを追加して使うと囲まれたコンテンツの全域にデザインが反映するようになる。

動かしたい画像や文章のどちらか一つにfloatを使うと親ボックスのデザインは反映する。

ただしfloatのコンテンツは浮き上がっているから実際にデザインがかかっているのはfloatがかかってないコンテンツのためなんだ。

画像や文章でfloatをかけた方よりもかけない方が小さいとデザインがはみ出してしまう。

どちらも親ボックスに収まったようにデザインをかけるにはfloatを先ずは両方に使わなくてはならない。

その上で、さらに親ボックスのdivなどにoverflowのhiddenを使うと大丈夫なんだ。

CSSのfloatは親ボックスのoverflowのhiddenとセットにして使わないと含まれるコンテンツに共通のデザインを付けられないと知ると背景や枠線が付かないと画像や背景がはみ出すなんて失敗しなくなる。