<html xmlns="http://www.w3.org/1999/xhtml"><head></head><body><section><h1>clear 特性 (CSS)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="2" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[2]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">WinIE</anchor> では <code class="CSS">clear: <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">all</anchor></code> が効くのか。。。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" input="spambot用ダミーフォーム%n;%textarea(id=&gt;msg,cols=&gt;40,lines=&gt;3,class=&gt;require);%n;(%text(id=&gt;name,label=&gt;お名前,size=&gt;6); [%text(id=&gt;name,label=&gt;メイル,size=&gt;5);] %check(default,id=&gt;record-date,label=&gt;日付を記録,description=&gt;日付と時刻を記録するか否か);) %submit(label=&gt;追加);" template=""></form></section><section><h1>br 要素 clear 属性 (HTML, XHTML 1)</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="3" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[3]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML</anchor> の <code class="HTMLe"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">br</anchor></code> 要素の
<dfn><code class="HTMLa">clear</code> 属性</dfn>は、
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">視覚UA</anchor> で、その <code class="HTMLe">br</code> 
による改行の続きの文章をどこにレンダリングするべきかを指定します。</p><p>この属性は、普通 <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="55" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:"><code xmlns="http://www.w3.org/1999/xhtml" class="HTMLa">align</code></anchor> 属性による物体の<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">浮動</anchor>の結果の回り込みを解除するために使われていました。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="4" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[4]</anchor-end> 仕様書:<ul><li><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML 4</anchor><ul><li>Float text around an object <anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="HTML4:&quot;present/graphics.html#idx-text&quot;" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="IW">IW:HTML4:&quot;present/graphics.html#idx-text&quot;</anchor-external></li></ul></li></ul></p><section><h1>代替</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="5" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[5]</anchor-end> この属性は<strong>非推奨</strong>です <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4</src>。
代わりに<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">スタイル・シート</anchor>を使って指定できます。</p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="6" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[6]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">CSS</anchor> では <code class="CSS">clear</code> 特性を使います。
特性値が HTML とは少々異なるので注意が必要です。</p></section><section><h1>属性値</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="7" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[7]</anchor-end> この属性は<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">列挙型</anchor>です。<table><tbody><tr><td>属性値</td><td>説明</td><td>出典</td></tr><tr><td><code class="HTML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">all</anchor></code></td><td>全浮動物体下の直近新行頭</td><td>[HTML 4]</td></tr><tr><td><code class="HTML">clear</code> (<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">真偽値属性</anchor>)</td><td><code class="HTML">all</code> と同じ</td><td>[NN2]</td></tr><tr><td><code class="HTML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">left</anchor></code></td><td>全左余白浮動物体下の直近新行頭</td><td>[HTML 4]</td></tr><tr><td><code class="HTML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">none</anchor></code></td><td>通常通り</td><td>[HTML 4]</td></tr><tr><td><code class="HTML"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">right</anchor></code></td><td>全右余白浮動物体下の直近新行頭</td><td>[HTML 4]</td></tr></tbody></table></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="8" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[8]</anchor-end> この属性は省略可能です。省略時は <code class="HTML">none</code>
が既定値となります <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4 15.1.3.2</src>。
(<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">DTD</anchor> での既定値は <code class="SGML">#<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">IMPLIED</anchor></code> です。)</p></section><section><h1>応用</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="9" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[9]</anchor-end> レンダリング例 <src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:">HTML 4 15.1.3.2</src>:</p><p>画像が左浮動しているとしますと、通常 (<code class="HTML">none</code>) では<pre>*********  -------
|       |  -------
| image |  --<code class="HTML">&lt;<code class="HTMLe">BR</code>&gt;</code>
|       |  ------
*********</pre></p><p>のようにレンダリングします。</p><p><code class="HTML">left</code> または <code class="HTML">all</code> が指定されていれば、<pre>*********  -------
|       |  -------
| image |  --<code class="HTML">&lt;BR clear=&quot;left&quot;&gt;</code>
|       |  
*********
-----------------</pre></p><p>のようなレンダリングとなります。</p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>歴史</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="10" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[10]</anchor-end> <code class="HTMLe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">br</anchor></code> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の <code class="HTMLa" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">clear</anchor></code>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性</anchor>は <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">HTML 2.0</anchor> の拡張として <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">Netscape Navigator</anchor>
が実装しました。</p><p><code class="HTMLe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">img</anchor></code> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要素</anchor>の <code class="HTMLa" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">align</anchor></code>
<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性</anchor>が拡張されて<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">画像</anchor>が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">浮動</anchor>できるようになったため、
<code class="HTMLe" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">br</anchor></code> を拡張する必要が生じたとされています。
<code class="HTML" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">left</anchor></code>, <code class="HTML" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">right</anchor></code>,
<code class="HTML" xml:lang="en"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">all</anchor></code> が<anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">属性値</anchor>として使えました。</p><comment-p xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><cite xmlns="http://www.w3.org/1999/xhtml">Netscape Navigator Extensions to HTML</cite> 
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI">http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html</anchor-external></comment-p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>実装</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="1" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[1]</anchor-end> <anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">NN2</anchor> (×NN 3+)
では <code class="HTML">&lt;<code class="HTMLe">br</code> clear&gt;</code>
で clear されたらしい。
<src xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:10:"><anchor xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:">要出典</anchor></src></p><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section><section><h1>メモ</h1><form xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" ref="comment"></form></section></section><section><h1>メモ</h1><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="11" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[11]</anchor-end> <cite xml:lang="en-us">document.clear - MDC</cite>
(<time>2009-09-13 18:12:10 +09:00</time> 版)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="https://developer.mozilla.org/en/DOM/document.clear" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI">https://developer.mozilla.org/en/DOM/document.clear</anchor-external></p><p><anchor-end xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:anchor="12" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:">[12]</anchor-end> <cite xml:lang="en">(X)HTML5 Tracking</cite>
(<time>2010-01-11 13:56:29 +09:00</time> 版)
<anchor-external xmlns="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resParameter="http://html5.org/tools/web-apps-tracker?from=4564&amp;to=4565" xmlns:a0="urn:x-suika-fam-cx:markup:suikawiki:0:9:" a0:resScheme="URI">http://html5.org/tools/web-apps-tracker?from=4564&amp;to=4565</anchor-external></p></section></body></html>