質問: css floatについて教えて下さい。 【html】 【css】 * { margin:0; padding:0; } body { background:url(../img/common/bg.gif) repeat} #wrapper { width:800px; margin:0 auto;} #top { background:url(../img/common/contents-flame-top.gif) no-repeat; height:30px;} #middle { background-color:#fff; padding:0 50px 100px 50px;} #a { float:left; width:360px; height:100px; background-color:#009966;} #b { float:left; width:340px; height:150px; background-color:#cc0033;} ------------------------------------- 上記でdivのaとbにfloatの設定をしないと#middleの中にaとbが入るのですが、floatの設定を入れると#middleの外にaとbが出てしまいます。 どこが間違っているのか教えて頂けますか?初心者ですので、よろしくお願い致します。
回答: floatはちゃんとclearしないと親要素に高さが反映されません。 今回の場合はbの後にclearを指定できる要素が無いので#middleにoverflow:hidden;を指定します。 そうすることで#middleの高さの計算方法が特殊になり、floatが指定された要素の高さも含めて反映してくれるようになります。