css - 将内容居中并浮动在里面

Question

我对浮动感到困惑：我有一个 div 菜单，里面有 2 个项目。我以margin 0 auto为中心。如果我将蓝色和红色放在浮动中，则不再居中并超出内容。我不懂为什么？

这是示例：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/

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