[CSS]floatを使う理由

質問

• CSSの初心者です。floatを使う理由について質問しています。
• navとsectionのfloatを使う理由と、floatを使わずに記述する方法について説明しています。
• また、footerについても簡単な説明があります。

回答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にしなければいけない理由があるのかと思いました。