floatの図がはみ出ないように「overflow:auto;」を設定する

webページでは図と字は何も考えずにタテに配置していればよかったが、プリントを作成すると図と字を狭いスペースに押し込む必要が出てくる。

そこで今まで使ったことがない「float」を使うことがおおくなってきた。

その経験をwebにも使おうとすると(主にPCとモバイルのレスポンシブ表示)問題が出てきた。

問題:高さが無くなる

字が少ない場合、PC表示では図の高さよりも小さくなり親要素(ボックス)の高さも図より小さくなる結果、図が親要素をはみ出てしまう

解決策
親要素のCSSに「overflow:auto;」を設定すると自動で高くなってくれる♪

親要素の高さがなくなる対策
ビフォー
親要素の高さが
文だけで決定されるので
図がはみ出る
アフター

親要素に
「overflow:auto;」
を設定
タイトルとURLをコピーしました