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したものを含めた高さになる。