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

时间：2019-04-09 17:55:48

标签： html css css3

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

<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;
}

我想在徽标的右侧和导航菜单的右侧。

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

如果我从标头中删除position：fixed代码，则浮动似乎可以正常工作。

3 个答案:

答案 0 :(得分：1)

这将是使用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。让我知道它是否有效！

答案 1 :(得分：0)

正如@AngelMdez所提到的，Flexbox比Floats是更好的选择，position: fixed应该都可以工作；只需记住您应该指定一个宽度，以便元素本身使用您期望的空间。

此后，您可以删除所有float和clear属性，应该没问题。

body {
  margin: 0;
}

header {
  position: fixed;
  width: 100%;
  max-width: 960px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  background-color: gray;
}

.content {
  padding-top: 70px;
}
<header>
  <a class="logo" href="/">Logo_name</a>
  <nav>
    <a href="#">Menu_1</a>
    <a href="#">Menu_2</a>
  </nav>
</header>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

浮点数的原始示例 

header {
  position: fixed;
  width: 100%;
  max-width: 960px;
  background-color: lightgray;
  height: 60px;
}

.logo {
  float: left;
}

nav {
  float: right;
}
<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>

<div class="content">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

答案 2 :(得分：0)

要回答您的问题：大多数HTML元素具有浏览器提供的默认样式，称为 User Agent 。 <header>的默认display值为display: block;。具有display: block的元素相对于其容器而言会增长到其最大宽度。

在这种情况下，<header>的容器是<body>的宽度，其宽度是<html>的宽度，而max-width占据了整个视口。

由于您已将960px设置为max-width: 960px;，因此该元素将仅增加到960px。这很好，因为宽度通常占据了整个视口。但是，一旦设置了绝对位置（在这种情况下为固定位置），该元素就会从常规文档流中移出。因为它现在固定在一个固定位置。意味着它没有宽度的父对象。因此它失去了其父对象（主体）的继承宽度。

要解决您已编写的代码的问题，只需为元素添加一个宽度。因为您已经设置了width: 100%;，所以可以使用header { position: fixed; width: 100%; background: blue; } a { color: white; } .logo { float: left; } nav { float: right; }告诉元素增长到100％。它将停止在960px，因为这是它的最大宽度：

<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>
%

相关问题
最新问题