clear bothで回り込みがうまく解除できません・・・。

質問

cssにて現在サイトを構成しています。

そこでお詳しい方がいらっしゃいましたらアドバイスを頂けたらと思います。

回り込みの指定解除なのですが、現在cssでbothの指定を行っています。名前はclearとします。

そこで、<br>に対してclass指定で、<br class="clear" />と記述するのですが、何か旨く解除し切れません・・・。

これをブロックレベルで、<p class="clear"></p>とすると旨く解除が出来ます。・・・でも空タグが出来るのでどうなのでしょうか？？？

ですが、時々<br class="clear" />でも、きちんと解除できるものもありますので、何か違いをつけて、インラインとブロックで解除を分けなければいけないのかな？と思いご質問させていただきました。

すみませんが、解除の仕方をアドバイス願います。

あと、これは余談な質問ですが、imgに対してマージンなどの指定を行ってもfirefox1.5で隙間が反映されません。

<img・・・・・ class="10px">（左右に10pxマージンを指定した場合）これはfirefoxのバグか何かでしょうか？はたまた私の定義に問題アリでしょうか？

どうぞ、宜しくお願いいたします。

回答No.2

noname#19175 · ベストアンサー

CSS1（CSSバージョン1）では<br>にもclearを使えますが、
CSS2では、clearはブロック要素に指定しなければなりません。
<br>に対してclear:both等を指定するのは、HTML3.2からの<br clear="all">などに関係していると思いますが、CSS2では間違った使い方です。

XHTMLではCSS2になる（またはブラウザ依存？）と思うので、<br>に対してclearは使えません。
その下にブロック要素を書いているはずですから、そこにclass="clear"を指定して下さい。
わざわざclearするためだけのタグを書く必要はありません。

たとえば
<p><img src="" style="float:left" />１行目<br />２行目<br style="clear:both;" />３行目</p>
<p>段落</p>
３行目の前でclear:leftしたいと思っても、CSS2では、そういうデザインは禁止のようです。

以下のように強引に段落を分けることで対応出来ます。
（ただし、論理構造が崩れます。
その方が問題ありでしょうけど、HTMLチェッカーやCSSチェッカーで減点はされません（´・ω・`）
何か別の対処方法があれば、教えて下さい＞識者の方
デザインを優先するなら、私は一部のHTMLチェッカーに減点されてでも(XHTMLではなく)HTMLを使って<br clear="all">を使うか、<br>にスタイルを当てる方をおすすめします。）
<p><img src="" style="float:left" />１行目<br />２行目</p>
<p style="clear:both;">３行目</p>
<p>段落</p>

> <img・・・・・ class="10px">（左右に10pxマージンを指定した場合）これはfirefoxのバグか何かでしょうか？はたまた私の定義に問題アリでしょうか？
記述に問題ありです。
詳細はANo.1をご参考に。。。

お礼

talooさん有難う御座います。

>CSS2では、clearはブロック要素に指定しなければなりません。

そうなのですね、初めて知りました・・・。

>３行目の前でclear:leftしたいと思っても、CSS2では、そういうデザインは禁止のようです。

むむむ・・、この様な定義が禁止となると、根本的に厳格な構造の定義が必要ですね・・・。

大変勉強になります。

回答No.3

bunoo

あまりお勧めしないのですが、clearするためだけのdivタグを作って、
-----------------------
div.hidari{
float:left;
}
div.migi{
float:right;
}
div.kaijo{
clear:both;
}
-----------------------
<div class="kaijo">
<div class="hidari">
文書左
</div>
<div class="migi">
文書右
</div>
</div>
-----------------------
のようにすることが出来たと思います（多分）。
ただ、確かこれはあまりほめられた方法ではなかったような気がします。参考URLも一応書いておきます。

参考URL：

http://www.2step-css.com/

回答No.1

yambejp

とりあえず、IDやclassの名称で数字からはじめるのは
やめましょう。
10px→px10とかでかまわないので。

もしclassの使い方を間違えていて、
clearというclassもstyleや外部ファイルで
きちんと宣言されていないのでは？

関係箇所だけでも具体的にどのようになさっているか
例示すると適切な指摘がつくかもしれません

お礼

有難う御座います。

class名は数字ではありません。
css部分は以下になります。

.clear {
clear: both;
}

この様に単体でクリアを用いること自体が問題なのでしょうか・・・。