CSS divs不可见_Css_Html_Overflow

CSS divs不可见

css html

CSS divs不可见,css,html,overflow,Css,Html,Overflow,我正在设计一个网站，在那里我与divs相混淆 <div id="header_wrapper"> <div class="header"> <div class="logo"> <img src="css/images/logo-dark.png" alt="Mint Bite" /> </div> </div> </div> &

我正在设计一个网站，在那里我与divs相混淆

<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>

但是我没有在

标题

之后显示

菜单

，而是得到了类似下图的结果。原因是什么

在标题包装div之后添加一行

<style>

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


.clearFix
{
明确：两者皆有；
}

在标题包装器之后添加此div

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


#主容器
{
宽度：960px；
保证金：0自动；
}
#收割台包装器
{
背景:#2323；
}
.标题
{
宽度：950px；
高度：100px；
}
标志
{
宽度：300px；
浮动：左；
}
#菜单包装
{
宽度：100%；
背景:#333333；
保证金：0；
填充：0；
溢出：自动；
}
.菜单
{
宽度：950px；
保证金：0自动；
}
.菜单ul
{
宽度：550px；
左边距：200px；
}
李先生
{
浮动：左；
填充：4px；
}
.菜单李a
{
颜色：#FFFFFF；
}

谢谢Moiz..但标题div背景与正文相同…而不是#232323。！

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

<html>
<head>
    <style>
        #mainContainer
        {
            width:960px;
            margin:0 auto;
        }
        #header_wrapper
        {
            background: #232323;

        }
        .header
        {
            width: 950px;
            height:100px;

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

        .menu ul
        {
            width: 550px;
            margin-left: 200px;
        }
        .menu li
        {
            float: left;
            padding: 4px;
        }
        .menu li a
        {
            color: #FFFFFF;
        }
    </style>
</head>
<body>
    <div id="mainContainer">
        <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>
    </div>
</body>
</html>