浮动：没有一个在我的响应式设计中不起作用

Question

我会暂时打开这个实时网址，否则这个问题将难以解释：

[测试网址已关闭]

请在支持媒体查询的浏览器中打开此选项，并将浏览器调整为移动设备，大约400px的视口宽度或更低：

您可以（应该）看到，全局导航菜单中的“标签”选项是可见的，活动的并且与右侧对齐。这可以正常工作，并通过将其浮动到右侧来完成：

.nav-option-active { @include inline-block; float:right; }

（注意：我正在使用SASS，因此使用@include语法）

到目前为止，这么好。但是，随着视口的增长，更多的空间可用于显示导航选项，包括此活动选项和其他选项，因为它们通常应该显示。有空房，他们不应漂浮。当您将视口调整为更大的视图时，您可以看到其他导航选项的工作原理：

见上文。全局导航选项显示为未展开，因为它们应该是，但是活动导航选项（在这种情况下是标记链接）仍然向右浮动。我希望在较大的视口中执行的操作是撤消浮动，以便链接将表现为内联块，未加载，并且与其他链接一样显示在标记中。我这样做的尝试如下：

.nav-option-active, .nav-option-active a, .nav-option-active a em { float:none; }

请注意，代码是绝望的，它应该只是在.nav-option-active元素上设置float：none。

正如您已经从屏幕截图中看到的那样，浮动没有被撤消，我无法弄清楚原因。在Firebug中，我看到浮动：确实没有应用，并且浮动：右侧被冲突，被浮动：否定。所以CSS肯定是应用的，但它没有任何效果。明确：两者都没有效果，虽然我认为这不是正确的使用属性。奇怪的是，如果在Firebug中我实际上在运行期间摆脱了浮动规则，则可以实现所需的行为。

我有一种感觉，我忽略了一些非常基本的东西或误解了一些基本的东西，所以我怎样才能撤消一旦浮动的浮动？

Answer 1

您的其他列表项目左侧浮动。你也需要漂浮那个。