W3G

clear属性

バージョン

• HTML4.01(T,F)
• XHTML1.0(T,F)

指定要素

br

必須

-

非推奨

• 非推奨
• HTML4.01 Strict 廃止
• XHTML1.0 Strict 廃止
• XHTML1.1 廃止

属性値

• none
• all
• left
• right

イメージ（img要素）にalign属性やCSSのfloatプロパティでその後に続くテキストなどのインライン内容の回り込みが指定されている場合に、br要素に clear属性を指定することでインライン内容の回り込みを解除します。値には次の4つのキーワードがあります。キーワードは半角アルファベットの大文字・小文字が区別されません（case-insensitive）。

none

回り込みの解除なしで通常に改行

left

align="left" の回り込みを解除し、次の行はイメージの最下端の直下にくる

right

align="right" の回り込みを解除し、次の行はイメージの最下端の直下にくる

all

左右いずれの回り込みも解除し、次の行はイメージの最下端の直下にくる

なお、clear属性は非推奨属性のため、後続のブロックレベルとして整形されている(display:block;が指定されている)要素に対して、clearプロパティを指定するか、回り込みが指定されている要素の親要素にclearfixを用いるなどCSSで代替することが推奨されています。

その他の属性

共通属性

• class
• id
• style
• title

clearfixによるclear属性の代替

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