Chrome上Float Right的奇怪行为

Question

我遇到了一个奇怪的问题，只在Chrome 中，只有在调整大小时才会在float: right的元素上添加额外的空间（请注意该名称后面的名称如何显示）倍）：

只有当我重新调整桌面媒体查询时才会遇到此问题。

我的HTML是这样的：

<header role="banner">
    <a class = "logo"...>...</a> <!-- inline-block -->
    <div class = "client">...</div> <!-- float: right -->
    <nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>

看到名字“迈克尔”？它显示在右侧，正确定位在主导航中。但是一旦浏览器调整大小，最后它就会移到底部。

知道造成这种情况的原因以及我如何解决这个问题？我已经确认在Windows和Mac上使用最新版本的Chrome时会出现这种情况。

Answer 1

在＆＃34;客户＆＃34;之间切换位置和＆＃34;导航＆＃34;像这样：

<header role="banner">
    <a class = "logo"...>...</a> <!-- inline-block -->
    <nav role = "navigation">...</nav> <!-- display: inline-block -->
    <div class = "client">...</div> <!-- float: right -->
</header>

问题是导航菜单漂浮在您的＆＃34;客户端＆＃34;容器。浮动元素后面的元素在它们关闭时会围绕它流动。