float leftするとはみ出てしまうことについて
今、WEBデザインのレシピ本を少しずつ進めているんですがその中で 「へぇ〜」と思ったことがあったので説明してみます。
ヘッダーのDIVボックス内で
画像(ロゴ)をfloat leftして サイトのタイトルと説明を書くレイアウトをすると
画像がはみでてしまう。
こんな時の対処方法を説明します。
結果をまず言うと
div class="header"ボックスの
:afterにclear: bothした後、ボックス要素を追加することで
画像含めたボックスの高さにすることが出来るというものです。
:afterは CSSのセレクタの一つで 指定した要素の後に内容を挿入する時に使います。
参考 :before、:after擬似要素 - 擬似クラスと擬似要素 - スタイルシート入門
clear: bothは floatすると 画像の横に文字が回り込むように並べられるので、
それを解除するための CSSプロパティです。
CSSで書くとこうなります。
.header:after{ content: ""; display: block; clear: both; }
これは、回り込み解除した 空文字ボックスを.header内の最後に挿入するCSSです。
content: "挿入します"とすると。
これを空文字にすると。
ちゃんと、floatした画像も含まれた divボックスになりましたね^ー^
簡単にまとめると
float :leftしちゃうと高さはボックス内で存在しないものとして扱われる。だから、画像とかが大きすぎるとボックスにはみ出ることがある。
けども、ボックス内でfloat解除したボックスを挿入するとfloatしたものを含めた高さになる。