※ ChatGPTを利用し、要約された質問です（原文：clearfix の後marginが効かない）
clearfix の後marginが効かない
このQ&Aのポイント
グローバルナビゲーションのfloat横並び指定後、margin-topが効かない問題についての質問です。
質問者はweb制作初心者で、IEブラウザで問題が発生しています。
質問文章にはHTMLコードとCSSが含まれており、効果を確認するための具体的な内容が記載されています。
はじめました。web制作初心者です。
ご教授お願い致します。
グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。
すると次の<div>以降のmargin-topが効きません！！
今のブラウザはIEです。
<div id="wrapper">
<div id="navi">
<ul>
<li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li>
<li class="drink"><a href="" title="ドリンク">ドリンク</a></li>
</ul>
</div>
</div>
<!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ -->
<!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ -->
<div id="contents" class="clearfix">
<div id="left">
<div id="kodawari">
<img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" />
</div>
</div>
</div>
</div>
#wrapper {
width: 900px;
}
#navi ul,
#navi ul li{
float: left;
}
/* afterに対応したブラウザ向け */
#contents .clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility:
hidden;
}
/* IE6 */
* htm .clearfix {
height: 1%;
}
/* IE7 */*:first-child+html .clearfix {
height: 1%;
}
#contents {
width: 900px;
padding-top: 5px;
padding-right: 13px;
padding-left: 12px;
}
#contents #left {
width: 660px;
margin-top: 15px; ←これが効かない
}
ごめんなさい。このCSSでわかりますでしょうか？
よろしくお願い申し上げます。
