低価格、短納期、高品質なWebサイト制作|ScuderiaWeb

float解除

tableタグによるレイアウトではなく、divタグのfloatによるレイアウトが主流となっていますが、floatを解除する方法については様々な議論が交わされています。
正解というものはありませんが、ScuderiaWebで使用しているfloat解除方法をご紹介します。

サンプル

float解除サンプル（別ウィンドウで表示）

ソース

上記サンプルで使用しているソースです。

CSS

.cl {
	display: inline-block;
}
.cl:after {
	content: "";
	display: block;
	clear: both;
}
div#box1 {
	float: left;
	background: #75813C;
	width: 200px;
}
div#box2 {
	float: left;
	background: #A1B157;
	width: 300px;
}

XHTML

<div class="cl">
	<div id="box1">BOX1</div>
	<div id="box2">BOX2</div>
</div>
<p>float後のテキスト</p>

floatした要素を囲っている要素にclass="cl"を指定します。