Yahoo!JAPANのトップページのCSSについて

質問

Webデザインを独学で勉強しており、近々ポータルサイトのようなものも作ろうと思ってます。
それで、FirefoxのプラグインのFirebugでYahoo!JAPANのトップページを見ていたんですが、コンテンツ部分にfloatを使用しているにも関わらず、それらの親要素（id="contents"）はちゃんとfloatされている子要素（id="navi"など）を内部に収めていました（Firebugで全体が青くなっていました）。普通、子要素がfloatしていたら、親要素は高さを指定するか、親要素の最下部にclearを施したfloatではない子要素を含まない限り、子要素をぶら下げるだけの高さを持たないただの起点になってしまうと思います。ですが、Yahoo!JAPANのトップページにはclearやその他のfloatでない子要素が見つからず、また親要素には高さを指定していません。
別に子要素をすべて親要素の中に収めていなくても、見掛け上問題ありませんが、何か子要素が親要素からはみ出しているような感じがして気持ち悪いので、どうやってYahoo!JAPANはやっているのかを知りたいです。
誰かわかる方はよろしくお願いします。

回答No.2

tenderfeel · ベストアンサー

Firebugで表示される168行目のCSS、出てると思いますがプロパティがかかれていないと思います。
CSSタブ押して編集を選択すると周辺の生ソースが見えると思いますが、
そこで使われてるのはClearFixという有名なハックです。

▼こんなの
#contents:after {
clear:both;
content:".";
display:block;
height:0pt;
visibility:hidden;
}

名前もClearFixで通ってるので、詳しい説明は検索してみてください。

回答No.1

steel_gray

yahooの方を調べたわけではありませんが、
浮動ボックスの親ブロックに overflow:hidden が指定されていませんか？

http://www.geocities.jp/multi_column/
http://www.geocities.jp/multi_column/float/05.html
「コンテナの高さを確保するには」「方法2 コンテナブロックに overflow」