CSS3: clear プロパティ - テキストなどの回り込みの解除
■ 概要
| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {clear: 値 } |
| 値 の形式 | none，left，right，both |
| 初 期 値 | none |
| 対応ブラウザー | C1+ / e4+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
| 適用可能な要素 | ブロックレベル要素 |
| 継 承 | しない |
■ 解説
clearプロパティ は，floatプロパティにより指定した当該要素の左寄せや右寄せに続く 要素の回り込みの解除 を指定します。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| none | 回り込みを解除しない。 （初期値） |
| left | 左寄せの後続要素の回り込みを解除する。 |
| right | 右寄せの後続要素の回り込みを解除する。 |
| both | 後続要素の回り込みはすべて解除する。 |
CSS3 では，縦書き時の対応をするための拡張が予定されていますが， 策定作業が遅れているようで，上記は CSS2.1 のままです。
■ 使用例（ clear プロパティの利用）
| HTMLソース | |
|---|---|
| HTML <body> ～ </body> |
<table border="1" style="margin-left: 2em; float:left;">
<tr><th>■■</th><th>●●</th></tr>
<tr><td>□□</td><td>◎◎</td></tr>
<tr><td>◇◇</td><td>○○</td></tr>
</table>
<div style="width: 2em; margin-left: 2em; float:left;"><br><br>＋</div>
<div style="width:15em; text-align:center; float:left;">
<img src="../how2/colosseo.jpg"><br>画像：colosseo.jpg
</div>
<br style="clear:left;">
<div style="width:2em; margin-left: 10em;">↓</div>
<br>
<table border="1" margin-left: 7.5em;
style="background-image:url(../how2/colosseo.jpg); ">
<tr><th>■■</th><th>●●</th></tr>
<tr><td>□□</td><td>◎◎</td></tr>
<tr><td>◇◇</td><td>○○</td></tr>
</table> |
| ブラウザー 表示例 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
＋  画像：colosseo.jpg ↓
|
■ 備考
HTML5 では，<br>要素の clear属性 は廃止になりました。 したがって，この CSS の clear プロパティで代替します。
【参考ページ】- 「とほほの WWW 入門」の「スタイルシート入門 」 の 「clear プロパティ」のページ
- 「HTMLクイック リファレンス」の「clear プロパティ」のページ
- 「ねこだまのCSSリファレンス&デモ」の「clear プロパティ」のページ
- 「W3C」の「clear プロパティ」のページ