２重フロートの１つだけの解除のしかたについて

質問

左右段組のWebページをfloatを使って作っています。
<div class="column01">と
<div class="column02">をつくり
01が左メニュー、02が右本文です。

その02の子階層でimgをさらに「float」しました。
以下のような構造です。

div.column01{float:left}
div.column02
　└div.img-box
　　　└img{float:left}
　　　└p
　└div.txt-box

で、上でいう「div.txt-box」から「float」を
解除したいのですが
「clear:left」を使うと、一部のブラウザでは
２つの「float」とも解除され、下のように
divがcolumn01の下にまでいってしまいます。

column01　column02
　↓　　　　↓
□□□　■■△△△
□□□　■■△△△　←div.img-box
□□□　△△△△△
□□□
□□□
　　　　×××××
　　　　×××××　←div.txt-box

ちなみに「clear:left」は
「div.txt-box」に指定したり、不本意ながら
構造図での「p」要素の次を<br>し
その<br>に指定したりしましたが、同じです。

◆質問１◆　「clear」は直前の親要素に対して
のみ有効というわたしの理解は合っていますか？
ブラウザのバグなのか、わたしがおかしいのかを教えてください。

◆質問２◆　意図通りにいかないのは
「Netscape4.73」ですが、解消方法があれば
どうぞお教えください。
参考ページのご紹介でもうれしいです。

回答No.1

UKY · ベストアンサー

clear は、同じ block formatting contexts 内で自身よりも前にあるすべての float に対する回り込みを禁止します。
ご質問の例で div.txt-box が div.column01 より下に来るのは CSS として正しい動作です。(両者が同じ block formatting contexts 内にあるため)

最も簡単な解決方法は、両者が異なる block formatting contexts に属するようにすることです。そのためには div.column02 が新しい block formatting contexts を生成すればよく、そのためには div.column02 にも float を設定すればよいのです。

ただし、これだけですべて何もかもうまく行くとは保証できませんので、ご容赦下さい。(レイアウトを決めるほかの条件との兼ね合いなどがあるので)

なお、Netscape 4 の CSS 処理は誤りだらけですので、たとえあなたが正しい CSS を書いたとしてもそれが Netscape 4 でうまく表示されるとは思わないで下さい。

お礼

あっ、以前、さびしくなる質問に
お答えくださったかたですね。
http://oshiete1.goo.ne.jp/kotaeru.php3?q=1521032
その節は失礼いたしました。
相変わらず修行が足りない質問をしています。

ご回答を読ませていただくに
まだ理解がぜんぜん足りていないということを
痛感しました。見られればいい、じゃなく
自分が何をやっているかを理解した上で
書きたいと思っていますので
解消法より再勉強を優先したいと思います。

ありがとうございました。参考になりました。

> Netscape 4 の CSS 処理は誤りだらけですので

ですね。中途半端に対応しているから
甘い夢を見てしまいます。
NS4はCSS「完全非対応」と考えたほうが
わたしは幸せになれそうです（^-^）。