CSS div 不可见

Question

我正在设计一个我对 div 感到困惑的网站。

<div id="header_wrapper">
    <div class="header">
        <div class="logo">
            <img src="css/images/logo-dark.png" alt="Mint Bite" />
        </div>

    </div>    
</div>

<div id="menu_wrapper">
    <div class="menu">
        <ul>
            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>

            <li>
                <a href="">HOME</a>
            </li>    
        </ul>    
    </div>
</div>

还有 CSS:

body
{
    margin:0;
    padding:0;
}
html
{
    background:#d2d1d0;
    margin:0;
    padding:0;
}
#header_wrapper
{
    background:#232323;

}
.header
{
    width:950px;
    margin:0 auto;
}
.logo
{
    width:300px;
    float:left;
}
#menu_wrapper
{
    overflow:auto;
    background:#333333;
    margin:0;
    padding:0;

}
.menu
{
    width:950px;
    margin:0 auto;
}

.menu ul
{
    width:550px;
    margin-left:200px;
}
.menu li
{
    float:left;
    padding:4px;
}
.menu li a
{
    color:#FFFFFF;
}

但是我没有在 header 之后显示 menu，而是得到了如下图所示的结果。什么原因？

Answer 1

在 header 包装器 div 之后添加一行。

<style>

.clearFix
{
clear:both;
}
</style>

在header wrapper之后添加这个div

<div class="clearFix"></div>