html - Chrome 上右浮动的奇怪行为

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>

看到“Michael”这个名字了吗？它出现在右侧，正确定位在主导航中。但是一旦浏览器调整大小，最后它就会移到底部。

知道是什么原因造成的，我该如何解决？我已验证 Windows 和 Mac 上最新版本的 Chrome 会出现这种情况。

Answer 1

像这样在“客户端”和“导航”之间切换位置:

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

问题是导航菜单在您的“客户端”容器周围 float 。 float 元素之后的元素靠近时会在其周围流动。