浮动不会返回它的位置。响应式设计答案

【问题标题】：Float does't return on it's place. Responsive design浮动不会返回它的位置。响应式设计
【发布时间】：2014-01-13 14:26:36
【问题描述】：

所以我必须菜单ul's 一个不浮动（左），另一个浮动到右边。问题是在调整浏览器窗口大小后正确的没有返回到它的原点。

预览：jsFiddle 图片： http://i.imgur.com/iHTbQ5d.png

HTML：

<div class="wrapper">
<ul class="menu">
    <li>Option1</li>
    <li>Option2</li>
    <li>Option3</li>
</ul>

<ul class="menu right">
    <li>Option4</li>
    <li>Option5</li>
</ul>
</div>

CSS：

.wrapper
{
    width: 100%;
}

.menu
{
    display: inline-block;
}

@media (max-width: 399px)
{
    .menu
    {
        display: block;
    }        
}


@media (min-width: 400px)
{
   .right
    {
        float:right;
    }
}

【问题讨论】：

标签： css responsive-design css-float

【解决方案1】：

它在 Firefox 上运行良好，但在 webkit 中，您需要浮动它并在菜单上清除：

http://jsfiddle.net/UTCE6/

.wrapper
{
    width: 100%;
}
.menu
{
    display: inline-block;
}

@media (max-width: 399px)
{
    .menu
    {
        display: block;
        clear:both;
        float:left;
    }        
}


@media (min-width: 400px)
{
    .right
        {
            float:right;
}
}

【讨论】：

它也适用于 IE。所以 Webkit 可能有点特别，因为它以某种方式为block 元素保留了整个区域，这样将元素设置为inline-block 显示并不能清除先前创建的区域。或者 Webkits block 正常保留该区域，但可能是 inline-block 没有完成它的工作（清除整个空间）。在您的示例中，该属性组合保留了该空间，以便它被简单地清除或display-block 能够清除它。无论哪种方式，他们都应该将其视为错误。谢谢！

【解决方案2】：

为什么你不这么简单地使用它？

.wrapper
{
    width: 100%;
}
.left{
    float:left;

}
.right{

    float:right;
}

DEMO

【讨论】：

因为我根本不希望它在某个时候浮动。在另一点上，我希望它再次漂浮。如果您要调整我为您准备的那个，您会注意到在399px 上，右侧的浮动将立即停止浮动，并且菜单将变为block 对象而不是inline-block。