CSS浮动问题，向右浮动正在清除我的其他浮动但没有浮动：清除答案

【问题标题】：CSS float issue, float right is clearing my other floats but there is no float:clearCSS浮动问题，向右浮动正在清除我的其他浮动但没有浮动：清除
【发布时间】：2017-06-10 06:44:39
【问题描述】：

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

向左浮动没问题，居中第二个div也没问题。但是当我尝试将最后一个 div 浮动到右侧时，它正在清除其他 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;
}

【问题讨论】：

.nav-center 将其向下推。当我将其设为内联块时，请参阅此小提琴：jsfiddle.net/GX9xn/2
比？你，使它成为一个内联块也有帮助，但现在类 .nav-center 没有居中，我将如何调整 css 来解决这个问题？

标签： html css css-float

【解决方案1】：

中心 div 将在浮动右侧 div 上方，因为它是块元素，块元素不是内联放置的。

走一走就是先添加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>

【讨论】：

谢谢，很高兴知道，它将我的右浮动放在标题中。但是现在 .nav-center 类坏了，没有居中，请看jsfiddle jsfiddle.net/GX9xn/5
非常感谢，但是当我尝试它时，我看到了一些不同的东西。我的小提琴和你的有什么不同？ jsfiddle.net/Q2m7k
你有一个错误...... HTML第12行将
替换为

【解决方案2】：

如果您使用浮动，您还需要设置显示属性才能按照您的意愿进行操作。我通过添加 display:inline-block 更改了您的小提琴。

您可能会注意到，您需要为您的 div 设置尺寸 width（高度可选）。

这里：Fiddle

【讨论】：

这是一种更好的 CSS 方式。浮动将您的元素从 DOM 中取出。

【解决方案3】：

您可以使用 display:table; 、 display:table-cell; 代替浮点数来将元素排列在单行中：

Fiddle

【讨论】：

【解决方案4】：

试试这个

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

您可以通过设置bottom和left属性来调整右div。

菲德尔：http://jsfiddle.net/GX9xn/6/

【讨论】：

【解决方案5】：

请试试这个FIDDLE

您的 CSS 文件有轻微变化

.nav-float-right {
    position:absolute;
    float:right;
    height: 55px;
    width: 205px;
    right:0;
    top:0;
    background: #fff;
}

【讨论】：