Updated / Published

clearプロパティは floatプロパティで指定された要素の回り込み(浮動化)の効果を解除します。clearプロパティは br要素の clear属性と同様の働きをすることと、CSS1 ではすべての要素が適用対象であったこともあり、br要素をセレクタに指定されることが多く、どの UA においてもCSS1仕様もサポートしている関係で回り込みの解除が反映されてしまうのですが、CSS2の仕様より適用対象がブロックボックスを形成する要素display : block ;)のみに変更されています。

初期値
none
適用対象
ブロックボックスを形成する要素
継承
しない
メディア
visual

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の指定と同じ効果が得られます。

hasLayoutプロパティがtrueになるCSSプロパティと値

IE6, 7には、すべての要素に独自のhasLayoutプロパティというものが付与されています。このhasLayoutプロパティにはtruefalseの真偽値が与えられており、通常はfalseなのですが、ある特定のCSSプロパティの値と組み合わせられた要素についてはhasLayoutプロパティの値がtrueへと切り替わる仕組みになっています。

そして、hasLayout="true"になると、IE6, 7ではその要素は他の要素に影響されない独自のレイアウトをもつ不思議な振る舞いをするようになります。このときに矩形(四角形)のボックスが生成され、表示が崩れているときなどもhasLayout="true"にすることで改善される場合があります。

display
inline-block
height
<長さ>または<パーセンテージ>
float
leftまたはright
position
absolute
width
<長さ>または<パーセンテージ>
writing-mode
tb-rt
zoom
<数字>または<パーセンテージ>