「clear:both;」の位置

追記（2007/2/9）：
　私は「float」と「clear」について、かなり誤解していたようです。だからこのエントリーとそれまでの「float」に関するエントリーは、その誤解に基づいています。どんな誤解かは、このエントリーの下の方にある追記に書きました。それも誤解があるかもしれませんが…。

---

　【「:after」に未対応だから】で私は【サンプル（test-MacNN702-b2.html）】の【結果】と比較して【サンプル（test-MacNN702-b3.html）】の【結果】について次のように書いた。

　問題がなさそうに見える。しかし、上でも述べた通り、以前に「エコ」スキンで実験していた時に何らかの問題が生じた。やはりmain要素の下で「clear:both;」を指定した方が良いだろう。content要素（ブロック）の中での「float」はcontent要素の中でクリアしておくべきだろう。

　この『何らかの問題』が分かったので補足する。
　【「clear:both」が抜けていた】では、記事を公開した後でこの問題に気付き、慌てて訂正した。その跡が汚く残っている。【「:after」に未対応だから】では「test_content」要素に色を着けていない。だから問題に気付かなかった。しかし、色を着けて確認すれば問題が明らかになる。【「clear:both」が抜けていた】ではcontent要素に色を着けて実験していたので問題に気付いた。
　【サンプル（test-MacNN702-b2.html）】では「<div style="clear:both; height:1px; overflow:hidden;"></div>」をtest_main要素の直後に入れた。「test_content」要素に色を着けたサンプルファイルと「Windows XP+IE6」「MacOS9.2.2+IE5.1.7」「MacOS9.2.2+Netscape 7.02」のそれぞれの見え方を示した図へのリンクは次の通りである。

【サンプル（test-MacNN702-b2_1.html）】 【結果の比較図】

　「test_side-a」要素と「test_main」要素の下に「test_content」要素の色「Aqua」が表示されている。どのブラウザでも問題ない。
　「<div style="clear:both; height:1px; overflow:hidden;"></div>」を「test_content」要素の下に入れた【サンプル（test-MacNN702-b3.html）】の「test_content」要素に色を着けたサンプルファイルと結果の比較図へのリンクは次の通りである。

【サンプル（test-MacNN702-b3_1.html）】 【結果の比較図】

　「Windows XP+IE6」では問題ない（「test_content」要素の下1pxが「test_container」要素の色「white」になる違いはある）が「MacOS9.2.2+IE5.1.7」と「MacOS9.2.2+Netscape 7.02」では「test_content」要素の色「Aqua」が表示されず「test_container」の色「white」が透けて見えている。【「:after」に未対応だから】の【サンプル（test-original.html）】で「test_container」の色「white」が表示されない現象と同じ原因である。
　やはり「エコ」スキンではmain要素の下で「clear:both;」を指定しなければいけない。content要素（ブロック）の中での「float」はcontent要素の中でクリアしておくべきである。

　さて、【「:after」に未対応だから】の【サンプル（test-MacNN702-a1.html）】ではどうなるだろうか。実験してみた。

【サンプル（test-MacNN702-a1_1.html）】 【結果の比較図】

　「MacOS9.2.2+IE5.1.7」で表示が乱れるのは無視して、「MacOS9.2.2+Netscape 7.02」の結果を見ると、【サンプル（test-MacNN702-b2_1.html）】と同じである。「#test_content:after」を使って「test_content」要素の下で「clear:both;」を指定しているのに問題が生じていない。しかし、よく見ると「test_content」要素の下1pxが「test_content」要素の色「Aqua」になっている。「height:1px;」を「height:10px;」に変えて確認するとはっきりと分かる。「test_content」要素の外なのに「test_content」要素の色が着く。ここで「#test_content:after」の意味を考えさせられる。「test_content」要素の下に指定するのだが「test_content」要素の一部とみなすのだろう。すると、【「:after」に未対応だから】で「#test_main:after」に「clear:both;」を指定した【サンプル（test-MacNN702-a2.html）】で「MacOS9.2.2+Netscape 7.02」でも表示が乱れた理由が想像できる。「test_main」要素の中で「clear:both;」を指定しているのと同じだからだろう。それでは表示が乱れて当然である。

　これで「float」と「clear」の正しい使い方が分かったような気がする。

追記（2007/2/9）：
　floatを使ったら同じボックスの中でclearすべきというのは、単に親ボックスの背景をfloatボックスの下に伸ばすためのテクニックに過ぎず、スタイルシートの仕様では、親ボックスの背景はfloatボックスの下に伸びないらしい。だからfloatをクリアする位置はルールとしてはどこでも良くて、クリアしたい所でクリアすれば良いらしい。問題は放っておいても親ボックスの背景色がfloatボックスの下に伸びてしまう「Windows XP+IE6」のバグを利用して親ボックス（container要素）の背景をfloatボックス（side-a要素とmain要素）の背景にしようとしたことにあるらしい。それで、仕様通りに表示される「MacOS9.2.2+IE5.1.7」と「MacOS9.2.2+Netscape 7.02」ではfloatボックスの下に親ボックスの背景が表示されなかったらしい。

追記（2007/2/9）：
　CSS2の仕様らしきもの→【CSS2勧告邦訳について】
　その中の「float」の項→【9.5 浮動体（Floats）】

　参考になる（私の誤解が分かる）サイト
　・【CSSによる段組（マルチカラム）レイアウト講座】
　（例えば、【5. フロートの性質】）
　・【floatは「回り込み」ではない】
　・【clearは「floatの解除」ではない】

追記（2007/2/9）：【独り言】に書いたメモ：

スタイルシートの「float」「clear」の使い方を勉強して疲れた。
この問題に関わるのが嫌になった。
「float」をテキストの回り込みだと解釈していたが間違いだった。
「clear」を「float」の解除だと解釈していたが間違いだった。
要するに「float」は浮いているわけで、紙を重ねる感じ。
だから上の紙が下の紙の外にはみだしてもおかしくない。
透明なら下の紙が透けて見える。
誤解を生むのは、
下の紙のテキストが上の紙に隠されないように移動する仕様。
ＨＴＭＬのalign属性のようになるから誤解する。
それと下の紙の高さが上の紙の内容には依存せず、
下の紙の内容で決まるということ。
だから下の紙の内容がなければ下の紙（の色）は見えなくなる。
「clear」を指定したボックスは下の紙の内容で、
その上辺が「float」を指定した上の紙の下辺に配置されるので、
下の紙が上の紙の下辺よりも下まで伸びる。
だから下の紙（の色）が見えるようになる。
そんな感じかな。