floatについて

htmlを書いていて、floatについて前々から気になっていたことがあったので調べてみることにしました。

divで親ボックスを作りその中にdivの小ボックスを二つ横に並べたいという場合。
以下のソースを実行してみます。

<div class="parent">
	<div class="child">
		子ボックス
	</div>
	<div class="child">
		子ボックス
	</div>
</div>

css側

.parent{
	width:204px;
	background:#FFFFFF;
}
.child{
	border-style: solid;
	border-width: 1px;
	border:1px
	height:100px;
	width:100px;
	float:left;
}

これで大丈夫だと思っていたのですが、これでは親のボックスの高さが0pxになってしまい、
子ボックスがはみ出た状態になってしまいます。
親ボックスの背景が透明や地色と同じ色なら問題はないのですが、
背景色や背景画像を設定する際にはうまく表示できません。
heightで高さを指定すればうまくはいくのですが、親ボックスの中にコンテンツを増やす場合には、
いちいちheightで高さを変えなければいけないことになります。

なんでもfloatというのは「回り込み」と解説されることが多いためブロックレベル要素を
回り込ませるためのプロパティと思われがちだそうです。（自分もそう思ってました。）
しかし、実際は違い「浮かせる」ためのプロパティらしいです。

つまりfloat:leftはブロックレベル要素を浮かした上で親要素対して左に配置するということです。
先ほどのサンプルのソース場合はfloatを適応された子ボックスは「浮く」ので、親ボックスは子ボックスを
内包することにより確保していた高さを失うことになるんだそう。

そこで次に以下のソースを実行してみます。

<div class="parent">
	<div class="child">
		子ボックス
	</div>
	<div class="child">
		子ボックス
	</div>
</div>

css側

.parent{
	width:204px;
	background:#FFFFFF;
}

.parent:after {
	content: "";
	display: block;
	clear: both;
}
.child{
	border-style: solid;
	border-width: 1px;
	border:1px
	height:100px;
	width:100px;
	float:left;
}

親ボックスの次の要素に対してclear:bothを適応することで親ボックスの背景が表示されるようになるみたいです。

after擬似クラスとcontentプロパティを使い””(空の文字)を追加し、それをブロックレベル要素に変更してから
clear:bothを適応しています。
IEはafter擬似クラスとcontentプロパティに適応していませんが、先述のバグあるためclearを行う必要がない為
問題ないみたいです。

これから使う場面があれば使ってみたいと思います。

ishi