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

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


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


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


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


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

幾つかの紫とピンクの小さな花

サンプルのソースコード


htmlの記載


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

cssの記載


div {border:2px #00008b solid;background:#fffaf0;overflow:hidden;}
p {float:left;}
img {max-height:135px;float:right;}

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


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


floatで画像や文章がはみ出したら先ずは両方にfloatを使おう


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


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


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


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


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


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


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

コメント

些細な日常の人気の投稿

MOTOROLAのMoto G5 Plusを使い出してのスマホレビュー

Imgurで画像URLと埋め込みコードを取得する方法

PlayストアでAndroidアプリのダウンロードが非常に遅い場合の打開策