cssのfloatについて

質問

cssのfloatを使い横並びを実現していますがoverflowを利用して横並びを実現するという方法を聞きました。

現状の構成は具体的に以下のような感じです。

<div id="main">
<div id="left">レフト</div>
<div id="center">センター</div>
</div>

#main:after {
content: ".";
display: block;
visibility: hidden;
height: 0.1px;
font-size: 0.1em;
line-height: 0;
clear: both;
}
#left {float: left;}
#center { float: right}

これをoverflowで実現するにはどうすればいいのでしょうか？
また、floatを使用しないで実現するメリットはなんでしょうか？

回答No.2

metametamu · ベストアンサー

floatを指定した要素の親要素に使うoverflowはいわゆるclearfixの代わり(ここで言:after擬似要素の内容)であってfloatの代用ではありません。
使う場合はこんな感じになります。

#main {
overflow:hidden;
}
#left {float: left;}
#center { float: right}

そしてclearfixというテクニックもclearプロパティの代用です。
clearfixを利用しないでoverflowで実現するメリットをあえて上げるなら一つのプロパティだけでそこそこの範囲のブラウザに対応できることです。
ですがoverflowだけですと一部のブラウザで表示が致命的になるためあまり利用されていないと思います。
むしろclearfixと併用されるシーンの方が多いです。

＞ORUKA1951さん
positionよりfloatを使う機会が多いのはIEでスクロールが重くなる状態を避けるためというのと、文字の大きさによって可変するメニューのレイアウトに都合が良いこと、あと位置を個別に指定する必要もないので使いやすいというのが理由にあるのではないでしょうか。

お礼

お返事ありがとうございます。
となるとブラウザへの配慮を考えてもやはり現状のままでいくのが無難なようですね。
実現するには多数の方法があるのでどれがいいのか迷うとハマってしまいますね^^;

回答No.1

ORUKA1951

このCSS、最近「はやり」のようですが、出所はどこなんだろう？？
position:relatve;とposition:absolute;で実現できるものを、なぜ目的が違うfloatを使うのだろうね。
　floatの長所は、訪問者のウィンドウが狭い場合は、折り返されるという長所があります。・・扱いにくい横スクロールを避けることができます。
　overflowは、その折り返しをさせないために、block要素を、inline要素に変更して、親blockの幅に関わらず強制的に横並びさせるものです。
　長所短所は、これから類推できるでしょう。

　いずれにしても、HTMLは何の目的で作られたものであるかを知らない人の考案でしょうね。
HTMLの略歴 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )

補足

お返事ありがとうございます。
つまり以下のような感じで実行すればいいのでしょうか？

<div id="main">
<div id="left">レフト</div>
<div id="center">センター</div>
</div>

#main {
overflow:hidden;
position:relatve;
width:900px;
}

#left {
overflow:hidden;
position:absolute;
top:0;
left:0;
width:200px;
}

#center {
overflow:hidden;
position:absolute;
top:0;
left:220;
width:680px;
}

さらに共通のCSSを一括で指定してやれば回り込み解除も不要ですしシンプルになりますね。