floatを使わずに、cssレイアウトって可能でしょうか？

質問

例えば、現在見ているこのページのように、ヘッダーとフッターがあり、コンテンツが左右二つのカラムで成り立っているようなレイアウトを、floatでなくpositionで、レイアウトすることは可能でしょうか？
（その際、左右どちらのカラムの方が、高さが高くなっても、レイアウトが崩れないように。）

floatを使いたくない理由は、親ボックスからはみ出さないように、ハック（clearfix）を使わないといけないからです。

回答No.5

edo_m18

若干回答とは違いますが・・。
clearfixをなぜそんなに嫌うのか分かりませんが。
clearfixはハックではないですよ。
ハックというのは、CSSのバグを利用したブラウザの差異を埋めるためのテクニックのことを言います。

clearfixは、CSSの仕様通りに記述してそれをfloatの対処に使っているにすぎないのでハックとは（厳密には）言わないと思っています。
なので、バグを利用して・・と思っているのであればバグではないので使用して問題ないと思いますがいかがでしょうか。

clearfixの概要は、親ボックスが内包している子ボックスのfloatを"解除する"テクニックです。
「親ボックスからはみ出している」と明記されていますが、
これは認識の誤りです。（言い方の問題かもしれませんが）
floatさせたボックスは、親ボックスから文字通り「float（浮く）」ので、親ボックスは子ボックスの範囲を識別しません。
そのために、子ボックスが親ボックスからはみ出しているように見えるのです。

ですが、clearfixを使うことで親ボックスの最後の要素にfloatをクリアするclearプロパティを指定することで、
親ボックスがfloatした子ボックスの後に出現する要素を識別するために（見た目的に）子ボックスを含んだ高さにまで親ボックスが広がるわけです。

これは自分の推察ですが、clearfixが広まった理由は、バグを利用したものではなく、かつ簡単に導入できるということから広く使われているものと考えています。（意味なくコピペして使ってる、というわけではないと思います）

余談ですが、自分自身はCSSの処理でどうしてそれがそうなるのかをある程度は検証や推察をしてから使うようにしています。
上記のclearfixに対する認識はそこから導き出したものです。（なので間違いもあるかもしれませんが・・）

なので、sweepeaさんがなぜclearfixをそんなに嫌うのか分かりませんが、自分は納得済みでclearfixを使用しています。

お礼

edo_m18さん、すいません・・・。

「OKWaveサポート担当」からメールがきまして、
> 投稿者自身が運営するホームページ・ブログや（略）
のURLがダメなのと
> 質問に対しての回答ではなく、他の回答者への指摘（略）
がダメなので、削除になったそうです・・・。

【禁止事項】
http://help.okwave.jp/okwave/beginner/prohibition.html
だそうです。

せっかく頂いていた、回答ですが、何卒ご了承ください。
ご回答、アドバイス、ありがとうございました。

でも、何を書かれていたのか、とても気になります・・・。
有益な情報であれば、上記の禁止事項を守った上で、再度ご投稿頂ければと思います。

(embedがobject...
↑途中で切れてる・・・。

補足

ご意見いただきありがとうございます。

物議を醸すようなことを書いてしまって、失礼しました。

> clearfixはハックではないですよ。
> ハックというのは、CSSのバグを利用した

私にとってはハックです。
CSSハックの正式な定義というものがない以上、何がハックで、
何がハックでないかは、個人の判断に委ねられると思います。

レンダリングのバグを利用した、CSSの記述はもちろんハックですが、
たとえ、定義通りによる使用であっても、力技で本来意図しない使用法で
使用されているものはハックと考えます。

ボックスの擬似要素afterに
・ピリオド「.」を付けて、
・高さを0にして、
・表示を隠す
「出して、隠す。」これは、私には紛れも無いハックです。

なぜなら、そのような記述は後方互換性が無いためです。
当然ですが、ブラウザの開発者達は、clearfixが正しく表示されるように、
レンダリングエンジンを開発する訳ではありません。

例えば、clearfixがIE7に対応するために、
min-height: 1%;
を追加したのがいい例だと思います。
個人でサイトを運用しているだけなら、1行の追加で済みますが、
何十というサイトを管理している、Web製作会社なら、頭が痛いはずです。
さらにそのサイトが、数百ページに及ぶようなものであれば。

理論上、min-height: 1%; は、表示に害を与えるようなものでは
ないでしょうが、通常、clearfixの使用者は、clearfixハックを
サイト内に多用するため、実務では、サイト内の各ページで、
本当に表示が崩れていないかを目視確認しなければなりません。
（たとえ、大丈夫だ、ということが分かっていても。）

一方、（当然ですが）左にマージンを20px空けたい時に、
margin-left: 20px;
とするのはハックではありません。
CSSの仕様書を、どう斜めから読んでも、解釈に差異が出ようがありませんから。
よって、margin-left: 20px; の意味は、ほぼユニバーサルなものだといっても良いでしょう。

> 「親ボックスからはみ出している」と明記されていますが、
> これは認識の誤りです。（言い方の問題かもしれませんが）

floatは、文字通り、浮かせるのが目的で、後続の要素はデフォルトで回り込みするので、
親ボックスからはみ出すのが仕様通りです。
（すいません、書き方が悪かったですね。IEの方が、独自の表示方法です。）

ですので、floatされた要素は、本来、その要素より「後」に開始する要素によって、clearされるべきでしょう。
clearfixは、言ってみれば、「前」に開始する要素によって、clearを試みているので、
美しくないコードが必要になってきます。

そもそもの私の質問は、「floatでなくpositionで書けないのか」です。
なぜなら、コンテンツや右メニューのカラムを「配置」したい訳であって、
別に「浮かせたい」訳ではないからです。
もし「配置」のためのプロパティが「float」なら、ネーミングが悪すぎます。

やっぱり、positionでは無理なんでしょうか？
もし無理だとしたら、それは誰が悪いわけではなく、W3Cに落ち度があると思います。
（個人的には、今後も（WHATWGでなく）W3Cに期待しますが。）

ちなみに、overflow:auto; は駄目ですかね？
結局、floatだし、これも、もっと厳密な人に言わせれば、
ハックと言われてしまうかもしれませんが・・・。