W3G

clearプロパティの値

clearプロパティに指定できる値のキーワードはそれぞれ以下の意味を示します。

none

回り込み（浮動化）を解除しない

left

左側の回りこみ（float : left ;）を解除する

right

右側の回り込み（float : right ;）を解除する

both

左右両側の回り込み（float : left ; float : right ;）を解除する

clearプロパティに "none" 以外の値を指定し、要素の回り込みを解除すると、回り込みを指定された要素のボックスの枠の上端が回り込みを解除する要素の下端にくるまで、上のマージン（margin-top）が必要分増やされることになります。つまり、回り込みを解除する要素のボックスは、回り込みを指定された要素の下端まで押し下げられます。

なお、CSS2.1 では上のマージン（margin-top）で回り込みを解除する要素を下端まで押し下げられない場合は、「クリアランス」という空白を設けて、下端まで移動させる概念が導入されています。クリアランスは、回り込みを指定された要素のボックスのマージンの折り畳みを行って、仮の配置をした上で処理するとされています。

clearプロパティの実装状況

IE

◯

Firefox

◯

Opera

◯

Chrome

◯

Safari

◯

iOS

◯

Android

◯

サンプル

ul {
	list-style : none ;
	margin : 0 ;
	padding : 0 ;
	display : inline-block ; /* IE6,7でhasLayout=trueにする */
}
ul {
	display : block ;  /* もとのブロックボックスを形成する要素に戻す */
}
/* clearfix */
ul:before,
ul:after {
	content : "" ;
	display : block ;
}
ul:after {
	clear : both ;
}
li {
	float : left ;
	width : 25% ;
	margin : 0 ;
	padding : 0 ;
	text-align : center ;
}
......
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
</ul>

回り込みが指定されている要素の親要素で後続の回り込みを解除する通称clearfixと呼ばれる手法です。IE6,7では :before擬似要素、:after擬似要素をサポートしていないため、clearfixの指定は無効なのですが、IE6,7にはhasLayoutという独自の概念があり、display:inline-block;の記述がIE6,7でhasLayoutをtrueにします。そして、hasLayoutがtrueの場合に高さもった矩形（四角形）のボックスが生成されることで、後続の回り込みができなくなり、結果的にIE6,7でもclearfixの指定と同じ効果が得られます。