标题卡在导航栏中。我需要把clearfix放在哪里？-解网

问：

当我在 .header 中添加背景图像时，图像卡在导航栏内。请注意，在 HTML 中，它位于前面。我不知道我应该在哪里使用，或者这不是问题。clearfix

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" type="text/css" href="/sass/main.css" />
    <title>Navigation</title>
  </head>
  <body>
    <nav class="nav">
      <ul>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Pre-Order</a></li>
        <li><a href="#">Info</a></li>
        <li><a href="#">About</a></li>
      </ul>

      <div class="logo__box">
        <img src="images/logo.png" alt="logo" class="logo" />
      </div>
    </nav>

    <header class="header">
      ga
    </header>
  </body>
</html>



@import "_variables.scss";
@import "_mixins.scss";
@import "_animations.scss";


* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

body {
  box-sizing: border-box;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  line-height: 1.6;
  color: $font-color;
}

.nav {
  width: 100%;
  font-size: 2rem;
  background-color: $font-color;
  float: left;

  ul {
    list-style: none;
    margin: 0;
    padding: 2.5rem;
    float: right;
    li {
      display: inline-block;
      padding-right: 2rem;
      padding-left: 7rem;

      a {
        text-decoration: none;
        font-weight: bold;
        color: $font-color-header;
        letter-spacing: 3px;
      }
    }
  }
}

.logo__box {
  position: absolute;
  float: left;
  padding: 1rem;
  left: 10rem;

  .logo {
    height: 6rem;
  }
}

.header {
  background-image: url(../images/header.jpg);
}

    @mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

HTML CSS sass clearfix

标题卡在导航栏中。我需要把clearfix放在哪里？

Header stuck in nav bar.Where I need to put clearfix?

评论