webページでは図と字は何も考えずにタテに配置していればよかったが、プリントを作成すると図と字を狭いスペースに押し込む必要が出てくる。
そこで今まで使ったことがない「float」を使うことがおおくなってきた。
その経験をwebにも使おうとすると(主にPCとモバイルのレスポンシブ表示)問題が出てきた。
目次(クリックでジャンプ)
問題:高さが無くなる
字が少ない場合、PC表示では図の高さよりも小さくなり親要素(ボックス)の高さも図より小さくなる結果、図が親要素をはみ出てしまう
解決策
は２つ
その１ overflow:auto
親要素のCSSに「overflow:auto;」を設定すると自動で高くなってくれる♪
親要素の高さがなくなる対策
ビフォー
親要素の高さが
文だけで決定されるので
図がはみ出る
文だけで決定されるので
図がはみ出る
→
アフター
親要素に
「overflow:auto;」
を設定
「overflow:auto;」
を設定
その２ clearfix
親要素に附属要素を書く。
.(親要素のクラス)::after {content: “”; display: table; clear: both;}
これも同じ効果だが、overflowの方はスクロールバーが出てしまうことがあるのに対し、こちらはそれが無い♪