クリアフィックス(<class="cl">)

質問

クリアフィックス(<class="cl">)を使用してホームページを作っています。内容はcssにコピーしてありますが、divタグに<class="cl">を入れると(margin: 0 auto;)が効かなくなります。<class="cl">を優先してほしいと言われたのすが、出来上がりが綺麗で、ベストな方法があれば教えてください。

回答No.1

ORUKA1951 · ベストアンサー

floatを解除するためのclearだと思います。
そもそも、「divタグに<class="cl">を入れる」というのは、明らかに変です。
floatは、テキスト中にある画像の周囲に本文記事を回りこませるためのプロパティであることはご存知だと思います。
[基本的な使い方]
<div class="section">
　　<h2>見出し</h2>
　　<div class="figure"><!-- figure:(英)挿絵 -->
　　　　<p><img></p>
　　　　<p>画像の説明</p>
　　</div>
　　<p>本文記事</p>
　　<p>本文記事</p>
</div>
<div class="section">
　　<h2>見出し</h2>
　　<p>本文記事</p>
・・・・
　と言う構造の文章があるとき、挿絵のブロックを右側にfloatさせたいときは、
div.figure{width:240px;float:right;margin:0.5em 1em;font-size:0.8em;}
div.section{clear:right;}
と言う風に使います。

(HTML/CSSについて)
　HTMLは文書構造をマークアップするものです。用意されている要素(タグで示される)で足りないとき、idやclass名をつけて文書構造を示します。
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』
　この部分がわかりにくかったので、HTML5では『文書をよりよく構造化するために、・・・要素が新しく追加されました。 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )』
　すなわち、sectionやfigure,footer,header,navなどです。

　もちろん、ここでclass名は必要すらなくて
　　<h2>見出し</h2>
　　<div class="figure"><!-- figure:(英)挿絵 -->
　　　　<p><img></p>
　　　　<p>画像の説明</p>
　　</div>
　　<p>本文記事</p>
　　<p>本文記事</p>
　　<h2>見出し</h2>
　　<p>本文記事</p>
・・・・
で、
div.figure{float:right;*****}
h2{clear:right;}
でも十分です。

「divタグに<class="cl">を入れると(margin: 0 auto;)が効かなくなります。」
　divであろうとなかろうと、divに指定してあるmarginは生きているはずです。floatする要素についてもmarginは有効です。ただし、floatする要素は、本文とは切り離されまか。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
浮動体は通常フローに属していないので、その前後に生成される位置指定されていないブロックボックスは、浮動体が存在しないかのように流し込まれる。
　・・・【中略】・・・
浮動ボックスのマージンが、隣接するボックスのマージンと相殺し合うことは決してない。 したがって前の例において、P要素のボックスと、IMG要素の浮動ボックスの間でマージンが相殺されることはない。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［視覚整形モデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#floats )］より

もし、段組にfloatを使われているのでしたら、それは本来の段組ではありません。
→Webデザインにおける段組 ( http://ja.wikipedia.org/wiki/%E6%AE%B5%E7%B5%84#Web.E3.83.87.E3.82.B6.E3.82.A4.E3.83.B3.E3.81.AB.E3.81.8A.E3.81.91.E3.82.8B.E6.AE.B5.E7.B5.84 )
→ＣＳＳについて教えてください - ホームページ作成ソフト - 教えて！goo ( http://okwave.jp/qa/q7539718.html )

　本来の、absoluteを使って段組をすると問題は解決すると思います。