html - CSS float 问题，右浮动正在清除我的其他 float 但没有 float :clear

Question

我正在制作一个标题栏，链接位于左侧、中间和右侧。每个由 div 分隔。

向左浮动没问题，居中第二个div没问题。但是，当我尝试将最后一个 div float 到右侧时，它正在清除其他 div，并且不在我的标题中。为什么是这样？它必须是我想念的简单东西吗？非常感谢

http://jsfiddle.net/GX9xn/

HTML

 <div class="header-fixed">
        <div class="header-container"> 

            <div class="nav-float-left">
              <div id="search">
                  <span>search</span>
              </div>    
            </div>
            <div class="nav-center">
                <a href="">title</a>
            </div>

            <div class="nav-float-right">

                  <a>
                        <span>more</span>
                  </a>                   
             <div>

        </div>
    </div>

CSS

.header-fixed {
    height:56px;
    border-top: 1px solid #222;
    width: 100%;
    background: green;
    position: fixed;
}
.header-container {
    width: 700px;
    margin: 0 auto;
    height: 56px;
}


.nav-float-left {
    float:left;
    height: 56px;
    color: rgba(255, 255, 255, .55);
    font-family:'Museo Sans W01 300',san-serif;
    font-size: 13px;
    text-shadow: 0px 1px 1px rgba(0, 0, 0, .95);
    filter: dropshadow(color= rgba(0, 0, 0, .95), offx=0, offy=1);  
}


.nav-center {
    letter-spacing: 0.05em;
    margin: 0 auto;
    height: 43px;
    width: 100px;
    padding-top: 13px;
    background: black;
    color: #d4d2d2;
    font-size: 29px;
    font-family: “Lucida Grande”, sans-serif; 
    text-align: center;
    box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -webkit-box-shadow:inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -o-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    -moz-box-shadow: inset 0px 0px 3px 0px rgba(0, 0, 0, .57);
    cursor: pointer;
}
.nav-center .ss-pika {
    font-size: 17px;
    margin-left: 1px;
    margin-right: 0px;

}
.nav-center a {
    display:block;
}

.nav-float-right {
    position:relative;
    float:right;
    height: 55px;
    width: 205px;
}

Answer 1

中心的 div 将在右浮动的 div 之上，因为它是 block 元素，并且 block 元素没有放置在行内。

四处走动是先添加 float-right 元素。

<div class="nav-float-left">
    <div id="search">
        <span>search</span>
    </div>  
</div>
<div class="nav-float-right">
    <a><span>more</span></a>                   
<div>
<div class="nav-center">
    <a href="">title</a>
</div>