- ベストアンサー
floatでレイアウトした後にcleafixは必ず必要ですか？
いつもお世話になっております。 早速質問ですが、floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 例えば以下のレイアウトでテキストを組んでみたのですが、winXPのIE7、IE6、opera9、FireFox3、では問題なく表示されていました。 それで外枠のBOXの幅が設定されており、float指定した要素の親要素に高さの指定があり、float指定した要素の親要素の下に外枠と同じ幅の画像やdivがあればclearfixを記述しなくてよいのではと考えたのですが、仕事でWEBを制作しないといけない為、確認しておきたくて投稿しました。 ご回答を宜しくお願いします。 〔XHTML〕 <body> <div id="wrapper"> <div id="header"> <div id="header01">AAA</div><div id="header02">BBB</div> </div><!--end header--> <div id="pankuzu">ccc</div> <div>111</div> <div>222</div> </div><!--end wrapper--> </body> 〔css〕 #header{ text-align:left; width: 900px; height:150px; } #header01 { float: left; width: 400px; } #header02 { float: left; width: 450px; height: 150px; } #pankuzu{ width: 900px; height: 20px; background-color:#999; }
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
親要素に元々フロートした子要素以上の高さが指定されていて、子要素が親要素の高さを超える事が絶対ない事を保証されている様なレイアウトであれば、必要ないかと思います。 ただ、実際のコンテンツでは「高さ」は成り行き（でなければならない）という状態のレイアウトが多いので、上記の様なケースは限られると思います。例えばその中に入る要素がイメージやFlashなど、全て高さが固定されているものだけで構成されている…という様な。 質問者様のサンプルであれば、header（ヘッダー）の中味が画像でできたロゴやナビしかない、という様な感じでしょうか。 ※こういう場合だと、floatじゃなくて全てpositionで配置するのも可能ですね。
その他の回答 (1)
- tenderfeel
- ベストアンサー率56% (215/379)
＞floatを使用してレイアウトした箇所には必ずclearfixを指定しなければならないのでしょうか？ 必要の無い場合は使用しなくてもいいです。 <div ="main"> ←width:900px;margin:0 auto; <div ="content"></div> ←float <div ="sidebar"></div> ←float </div> clearfixは上記のソースような、floatさせた要素の後にclearプロパティを持つ要素を置けない場合や、 親にfloatが指定できない場合の解決策として考えられたものなので、 必要なければ指定する必要はありません。（下にちょっと余計な空間が増えたりしますし） 若干中の要素に影響出ることもありますが、 ovarflow:hidden;とzoom:100%;だけでも親の高さが無くなる問題は解決出来ます。
お礼
>clearfixは上記のソースような、floatさせた要素の後にclearプロパティを持つ要素を置けない場合や、 親にfloatが指定できない場合の解決策として考えられたものなので、 必要なければ指定する必要はありません。 私がclearfixを使おうか迷っていた箇所はページの上部になるので、むしろ使わない方がよさそうですね。 ありがとうございました！
お礼
ご回答ありがとうございます。 >※こういう場合だと、floatじゃなくて全てpositionで配置するのも可能ですね。 なるほど。最初に会社から渡されたサンプルがfloatを使用していたのでfloatの方がいいのかなと思っていました。 positionも検討してみます。