br要素(forced line break)は文書中のテキスト(文章)やイメージなどのインライン内容を強制的に改行します。段落の表示の途中でどうしても強制的に改行を入れる必要があるという場合に指定する区切りとして使用します。終了タグはなく、内容をもたない空要素です。

バージョン
  • HTML4.01(S,T,F)
  • XHTML1.0(S,T,F)
  • XHTML1.1
要素分類
インライン要素
開始タグ
必須
終了タグ
なし
非推奨
-
内容モデル
-

clear属性

バージョン
  • HTML4.01(T,F)
  • XHTML1.0(T,F)
指定要素
br
必須
-
非推奨
  • 非推奨
  • HTML4.01 Strict 廃止
  • XHTML1.0 Strict 廃止
  • XHTML1.1 廃止
属性値
  • none
  • all
  • left
  • right

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

none
回り込みの解除なしで通常に改行
left
align="left" の回り込みを解除し、次の行はイメージの最下端の直下にくる
right
align="right" の回り込みを解除し、次の行はイメージの最下端の直下にくる
all
左右いずれの回り込みも解除し、次の行はイメージの最下端の直下にくる

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

その他の属性

共通属性

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

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
<数字>または<パーセンテージ>
Updated / Published