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

結城永人 -2018年3月11日 (日)

サイトのデザインでCSSのfloat（浮遊）を使うと複数のコンテンツを両側に配置して一列に表示できる。しかし上手く行かない場合も多くて難しい。陥りがちな失敗を二つ挙げると背景や枠線が付かないのと画像や背景がはみ出すのとで、デザインを崩してしまうんだ。何とかならないかと考えながら対処法が見付かったので、纏めておきたい。floatで背景や枠線が付かなければoverflowのhiddenも使おう

一文目
二文目
三文目
四文目

サンプルのソースコードHTML<div class="fbox"> <p>一文目<br>二文目<br>三文目<br>四文目</p> <img src="画像URL"> </div>CSS.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がかかってないコンテンツのためなんだ。画像や文章でfloatをかけた方よりもかけない方が小さいとデザインがはみ出してしまう。どちらも親ボックスに収まったようにデザインをかけるにはfloatを先ずは両方に使わなくてはならない。その上で、さらに親ボックスのdivなどにoverflowのhiddenを使うと大丈夫なんだ。 CSSのfloatは親ボックスのoverflowのhiddenとセットにして使わないと含まれるコンテンツに共通のデザインを付けられないと知ると背景や枠線が付かないと画像や背景がはみ出すなんて失敗しなくなる。

参考サイト

overflowを使ってfloatの問題を解決するスタイルシートのテクニック

コメント