时间戳

首页 > 解决方案 > 当父元素的位置固定时，子元素失去浮动

html - 当父元素的位置固定时，子元素失去浮动

问题描述

我正在创建一个导航面板，向下滚动时将保持固定。这是代码。

<header>
    <a class="logo" href="/">Logo_name</a>
    <nav>
        <a href="#">Menu_1</a>
        <a href="#">Menu_2</a>
    </nav>
    <div style="clear: both;"></div>
</header>

这是CSS

header {
    position: fixed;
    max-width:960px;
}

.logo {
    float: left;
}
nav {
    float: right;
}

我想在右侧有徽标，在右侧有导航菜单。

现在，浮动似乎可以工作，但导航元素出现在徽标之后，而不是浮动到右边缘。

如果我从标题中删除位置：固定代码，浮动似乎工作正常。

标签： htmlcss

解决方案

这将是使用 flexbox 而不是 float 的解决方案：

header {
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
}

.logo {
  align-self: flex-start;
}

nav {
  align-self: flex-end;
}
<header>
  <a class="logo" href="/">Logo_name</a>
  <nav>
    <a href="#">Menu_1</a>
    <a href="#">Menu_2</a>
  </nav>
</header>

你需要删除 clear: both; 来自 HTML。让我知道它是否有效！

推荐阅读