将内容居中并浮在里面

Question

我对浮动感到困惑：我有一个包含2个项目的div菜单。我以自动保证金0为中心。如果我把蓝色和红色放在浮动中不再居中并且没有内容。我不懂为什么？

以下是示例：http://jsfiddle.net/A4FHd/

CSS：

#content{
    margin:0 auto;
    width:400px;
    background:yellow;
}

#text{
    margin:0 auto;
    text-align:justify;
}

#menu{
    margin:0 auto;
    z-index:0;
    background:grey;
}

#blue{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:blue;
}
#red{
    float:left;
    width:50px; height:50px;
    z-index:0;
    background:red;
}

HTML：

<div id="content">

    <div id="text"> 
    some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text 
    </div>

    <div id="menu"> 
        <div id="red"> </div>
        <div id="blue"> </div>
    </div>

</div>

Answer 1

将overflow: hidden添加到包装器div 如果你想让菜单居中 - 你必须指定其内容的宽度： http://jsfiddle.net/A4FHd/5/

您需要指定宽度，因为浮动元素不在流中，并且无助于计算父元素（包含块）的宽度。