clear:both;を入れる箇所が分からない

質問

floatを使ったら
次の要素にclear:both;を入れないといけないと思うのですが
たくさん使っていたら分からなくなってしまいました。

添付画像のようなサイトがありますが
pやul liなどにfloatを使っていたら
clear:both;を入れる要素がないように思うのですが
どうすればよいのでしょうか。

一応、表示は崩れてはいないのですが
なんだかすっきりしません…

よろしくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

clearは入れなければならないものではありません。

　それよりも、このようなセクションの配置にfloatを使用するのは、本来の目的を逸脱しています。また、id属性でマークアップされているようですが、それもおかしいです。
　floatは、本来は、挿絵などの周囲にテキストを回りこませるためのプロパティです。たとえば、添付されているブロック内に挿絵があり、それをfloatさせたときに次のセクションでclearすると全部cleaされてしまいます。なによりも、flatさせるブロックはそれに続く要素より前に記述しなければならない--文書構造に反するものになる可能性があります。
　id属性の値は文書内にひとつしか記述できませんから、結果的にスタイルシート(HTMLも)とても複雑なものになります。そもそも#a #b ul #c{}なんて指定は無意味です。一箇所しかないのですから#c{}で良いですが、すぐ理解できるようにliが複数あればその数だけ#を用意しなければなりません。
　idやclassは、『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』と書かれているようにデザインのためにつけるものではありません。

　いちど、リンクターゲット以外のidを一切ない状態で、デザインも一切考えないでHTMLでは文書構造だけをマークアップして作成してみたらいかがでしょう。idもfloatも不要な、そしてシンプルで解りやすいHTMLやCSSができると思います。

[例]
HTML,CSSの記述について - HTML - 教えて！goo ( http://okwave.jp/qa/q7636233.html )
円形の配置にするコーディングについて - Webデザイン・CSS - 教えて！goo ( http://okwave.jp/qa/q7649067.html )

　で示したHTMLをご覧になると、文書構造だけが書かれているのが解ると思います。そしてスタイルシートは、その文書構造に基づいて書かれていますから、HTMLを見なくてもどのようにデザインしてあるか理解できるはずです。
(すこし難しい質問でしたのでCSSは難しいですが、やっていることはわかるはず)
★不要なidは一切ありません。

お礼

ORUKA1951様回答ありがとうございます。
デザインを構成するため、div idをたくさんつけてしまいました…
「デザインのためにつけるものではない」なるほどです。。
基本独学なため、色んな人のホームページを見よう見まねで真似しています。
まだまだ変なコーディングの仕方で恥ずかしい限りです(:_;)

>clearは入れなければならないものではありません。
上記ですが、例えばフッタの中の、一番下のリスト(li)を横並びにしたとき
clearを入れずに終わっても良いのでしょうか?

回答No.2

naokita

要所のDIVに背景色（background）などを付けると、効いているか判断できます。（旧IE以外の話）

幅と高さが保たれていれば問題ない場合が多い。（旧IE以外の話）

１、右上のピンクのボックス内の最後
２、上段の黒のボックス内の最後
３、下段のグレーの上部は不要
４、下段のグレーのボックス内の最後

その他のところでは、
「floatを切る」場所にclear要素が必要だが、
ul>liなどには別な要素で勝手にclear出来ない。文法違反・・・

また、現在の構成では、
その別の要素がないのでclearがおかしい・・・
疑似要素でも可能。
簡単なテクニックとしては、clearFIXなどで解決できる（賛否両論ある）

お礼

naokita様回答ありがとうございます！
すみません、
ul>liなどには別な要素で勝手にclear出来ない。というのは
どういうことでしょうか。
もしよければ教えてください。よろしくお願いします。