[CSS]floatを使う理由

質問

CSSの初心者です。
http://yoppa.org/taumedia10/1695.html　というページに例として挙げられているスタイルシートで、

以下の記述があります。

nav { float:right; width:236px; }
section { float:right; width:620px;}
footer {clear:both !important; text-align: center;}

ここでSectionをfloatさせる理由は何でしょうか？F
loatさせなれければ、わざわざClearを使う必要もないし、以下のように記述したほうが簡単だと思います。
nav { float:right; width:236px; }
section {width:620px;}

よろしくお願いします。
footer {text-align: center;}

回答No.1

ORUKA1951 · ベストアンサー

まったくそのとおりです。
本来floatは、figureなどの周囲にテキストを回りこませるためのプロパティですから、このような大きなブロックの配置に使用するといくつかの欠点が露呈してしまいます。
1) 肝心の記事内でfloat,clearが使えなくなる。たとえばsection内に挿絵が存在する場合、もし次の段落ないし見出しでclearしてしまうと・・
2) 内容の出現順番がfloatに制約される。
　たとえば、
<section>
　<section>
　</section>
　<section>
　</section>
　<section>
　</section>
　<aside>
　</aside>
　<div id="contentTable">
　</div>
</section>
　という構造のとき、小さい端末では
[section]
[sub section]
[sub section]
[sub section]
[aside]
と表示し、スマホなどある程度稼げる場合は
[section]
[contenttable][sub section]
　　　　　　　　　[sub section]
　　　　　　　　　[sub section]
　　　　　　　　　[aside]
と表示し、十分な巾があれば
[section]
[contenttable][sub section] [aside]
　　　　　　　　　[sub section]
　　　　　　　　　[sub section]
と表示したい、あるいは将来左右を入れ替えたいとかの場合HTMLまで手を加えないとなりません。
この場合
body>section{position:relative;}
body>section>section{width:60%;margin:0 auto;}
body>section>aside,body>section>div.contentTable{position:absolute;top:0;width:15%;height:100%;}
body>section>aside{right:0;}
body>section>div.contentTable{left:0;}
とかのほうが優れています。

>ここでSectionをfloatさせる理由は何でしょうか？F
loatさせなれければ、わざわざClearを使う必要もないし、以下のように記述したほうが簡単だと思います。
　ページが狭いとき、全体を下に回りこませるとか・・実際にデータを入れて見られるとよくわかると思います。floatなりに工夫した結果です。

　ただ、この様な場合に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 )

　そのサイトの説明、HTML5をちゃんと理解されてないようですね。
artcleは、本来内部にheader,footerを持つか持つと仮定されても良いときに使う要素で内部にheadingと<p>しかない場合には使うべきではないでしょう。
　sectionは、内部にheadingを持つか、持つと類推される場面で使用しますから
　<section>
　　<article>
　　　<h1>このサイトについて</h1>
　　　<p>・・・【中略】・・・</p>
　　　<h2>HTML5とCSS3による豊かな表現</h2>
　　　<p>・・・【中略】・・・</p>
　　</article>
　　<article>
　　　<h1>さらに別の記事</h1>
　　　<p>・・・【中略】・・・</p>
　　</article>
　</section>
ではなくて
　<section>
　　<h1>このサイトについて</h1>
　　<p>・・・【中略】・・・</p>
　　<section>
　　　<h2>HTML5とCSS3による豊かな表現</h2>
　　　<p>・・・【中略】・・・</p>
　　</section>
　　<section>
　　　<h1>さらに別の記事</h1>
　　　<p>・・・【中略】・・・</p>
　　</section>
　</section>
でなければなりません。

　hgroupは先日までも議論されていましたが、これはよほど限られた状態でないと使わないでしょう。

お礼

なるほど、ありがとうございます。
初心者なので、Floatにしたほうが、なんらかのメリットがある、あるいはfloatにしなければいけない理由があるのかと思いました。

回答No.2

ORUKA1951

ちょっとしたミスの修正
　<section>
　　<h1>このサイトについて</h1>
　　<p>・・・【中略】・・・</p>
　　<section>
　　　<h1>HTML5とCSS3による豊かな表現</h1>
　　　<p>・・・【中略】・・・</p>
　　</section>
　　<section>
　　　<h1>さらに別の記事</h1>
　　　<p>・・・【中略】・・・</p>
　　</section>
　</section>
もしくは
　<section>
　　<h1>このサイトについて</h1>
　　<p>・・・【中略】・・・</p>
　　<section>
　　　<h2>HTML5とCSS3による豊かな表現</h2>
　　　<p>・・・【中略】・・・</p>
　　</section>
　　<section>
　　　<h2>さらに別の記事</h2>
　　　<p>・・・【中略】・・・</p>
　　</section>
　</section>

です。sectioning要素で、そのセクションの階層を判断するのがHTML5の仕様です。そのため以下のいずれかの方法をとることが強く推奨されています。
★sectionで階層を明示して、すべてh1で見出しをつける。
★sectionで階層を示すと同時に階層に対応した見だしレベルとする。

　前者は、将来、階層が追加されるなどしたときに楽です。
　後者は、古いブラウザなどにおいても互換性があります。階層が変更されるとすべて書き直さなければならない。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
Sections may contain headings of any rank, but authors are strongly encouraged to either use only h1 elements, or to use elements of the appropriate rank for the section's nesting level.
Authors are also encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one element of sectioning content.
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［4.4 Sections — HTML5( http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#headings-and-sections )］より

要約すると
・sectionには、すべての階層の見出しを含むことができます。しかし、著者は、h1 要素のみ使用するか、sectionのネストされた階層に見合ったランクの見出しを使うことが、強く推奨される。
・著者においては、セクショニング・コンテンツの中に、そのセクションを明示的に置くことが推奨される。一つのセクショニング・コンテンツの中に複数の見出しを入れ、それによって、暗黙に生成されたセクションに依存しないほうがよい。

　後段は、hgroupやレベルの異なる見出しをおいて、ブラウザの解釈に依存するのではないことを言っています。
<section>
　<h1></h1>
　<h2></h2>
や
<section>
　<hgroup>
　　<h1></h1>
　　<h2></h2>
　</hgroup>
じゃなくて・・・
<section>
　<h1></h1>
　<section>
　　<h2></h2>
と言う意味。