【CSS 】clearfixを使ってfloatを解除する

最近、cssでよく使用しているのがclearfixです。

親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。

clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。

ソースは以下です。

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clearfix {
	display: inline-table;
	min-height: 1%;
}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

まず最初の.clearfix:after

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}

これはFirefox/Safari/Operaなどのモダンブラウザ用の記述です。
after擬似要素を指定して、ブロック要素のあとに見えないコンテンツをいれクリアする回避策です。
IE7・IE6・Mac版IE5には、after擬似要素が未対応。

.clearfix {
	display: inline-table;
	min-height: 1%;
}

こちらは、IE7とMac版IE5対策用。
inline-tableを指定することにより、Mac版IEで回避。
min-heightはIE7より対応しているのでmin-heightで最小値を指定して回避。

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */

最後にIE6以前への対応。
IE6より下位のバージョンでは、inline-tableが未対応なのでheightを指定。

使用方法

<div id="親ボックス" class="clearfix">
<div id="子ボックス01">○○○○○○○○○○</div>
<div id="子ボックス02">○○○○○○○○○○</div>
</div>