CSS(初歩的）な質問です…floatの解除

質問

大変初歩的な質問でごめんなさい。

フローとの解除について教えて下さい。

例）

<div id="main">
<div id="left">
</div>

<div id="right">
</div>
</div>

とあり、
#main{ width : 1000px ; }
#left , #right{
width : 500px;
float : left ;
}
と、指定するとします…（ＣＳＳ、ＨＴＭＬは最低限しか書いていませんが。。。
ＨＴＭＬは4.01か、ＸＨＴＭＬあたりでお願いします。ＨＴＭＬ5はまだまだ……

このあと、#leftと#rightの次には</div>がありますが、この場合、clear : left (both);はどこに指定すればよいのでしょうか？もしくは、指定する必要が無いのでしょうか？

大変初歩的ですがよろしくお願いいたします。

回答No.2

tenderfeel · ベストアンサー

<div id="main">
<div id="left">
</div>

<div id="right">
</div>
<hr>
<div id="hoge"></div>
</div>

hr {
clear: both;
visibility:hidden
margin:0;
padding:0;
border:0;
}

floatする要素の親にoverflow:hiddenでもいいのですが、
HTML構造を変えられず、floatしている要素と次の要素の間に適当な要素がないのであれば
hr（brでもいい）を追加してそこでclearするのが手っ取り早いかなと思いました。

​

お礼

お礼が遅くなってしまい大変申し訳ありません…＾＾

なるほど…

適当な要素を追加して、それにclearを設定するのですね…
大変参考になりました。

回答No.1

ORUKA1951

divの使い方やid,class名の付け方が、そもそも・・
「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」ためのものです。left,rightは、それとは程遠い・・。仕様書すら読んでないマニュアル--サイトがあるので注意してください。

　floatは、本来は文章中の画像などの周囲にテキストを回りこませるためのものです。
・オブジェクトの浮動 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/graphics.html#idx-alignment-1 )
・'float' ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#propdef-float )
　通常は、次のセクショニングコンテンツ(HTML5的)や段落、見出しなどで解除すべきものですね。
<p class="figure"><img*****></p>
<p>段落</p>
<h3>見出し</h3><!-- float解除 -->
<p>段落</p>
<p>段落</p>

ですので、スタイルシートでは次のように書かれるはずです。
div.section p.figure{width:240px;float:left;margin:0.5em 1em;}
div.section h1,div.section h2,div.section h3{clear:left;}
　CSSを読むと、
「本文(sectionDIV)内に、挿絵(figuer)が現れたら、左に浮動させて、次に見出し(h3以上)が現れたら、それを解除する。」
　このようにHTMLが、class名を使ってきちんと文書構造をマークアップされていたら、HTMLを見なくてもスタイルシートで指定している内容が手に取るようにわかるはずです。また、floatが本来の使い方をされているため、大変わかりやすいでしょう。
　将来--数年後--HTMLに手を加えるのも楽です。気が変わって画像を左に浮動させたいとき--スタイルシートに手を加えたいときもHTMLを弄る必要がありません。

　以上とても大事なことを理解したうえで、本題です。
left,rightの意味が、まったくわかりませんので、アドバイスの使用がないのですが---こんなHTML書いたらダメです。先で何が書いてあるか、いちいちHTMLを開いて中を読まなきゃわからなくなる。

たとえば、本文を示すclass名をつけたDIVの中に、その記事の目次があったとします。するとマークアップは
<div class="section">
　<div class="contentTable">
　　<ol>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　</ol>
　</div>
　<div class="section" id="section1-1">
　　<h3>見出し</h3>
　　<p>段落</p>
　　<p>段落</p>
　</div>
　<div class="section" id="section1-2">
　　<h3>見出し</h3>
　　<p>段落</p>
　　<p>段落</p>
　</div>
　<div class="section" id="section1-3">
　　<h3>見出し</h3>
　　<p>段落</p>
　　<p>段落</p>
　</div>
</div>
<div class="section">
　<div class="contentTable">
　　<ol>
　　　<li></li>
　　　<li></li>
　　　<li></li>
　　</ol>
　</div>
　<div class="section" id="section2-1">
　　<h3>見出し</h3>
・・・【後略】・・・
　というHTMLがあったとします。--文書構造しか書かれていません!!
　ここで、
div.section div section{clear:none;width:80%;margin-left:20%;}
div.section{clear:left; width:100%;}
div.section div.contentTable{width:20%;clear:left;}
　先で右に置きたければ、right⇔leftと書き換えれば済む。次の要素の横幅が100%だと、floatの必要はないが、早く終わった場合のためにclearする。

　floatを使うと、文書構造を変更する必要がでてきますので。もし段組のためでしたら、absoluteを使うべきでしょう。
div.section{position:arelative;}
div.section div.contentTable{position:absoute;top:0;left:0;height:100%;width:20%;}
div.section div.section{width:80%;margion-left:20%;}
　これだと、目次を後に書いても良い。