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

【问题标题】：Header stuck in nav bar.Where I need to put clearfix?标题卡在导航栏中。我需要在哪里放置 clearfix？
【发布时间】：2020-04-01 09:22:15
【问题描述】：

当我在 .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;
  }
}

【问题讨论】：

抱歉它是嵌套的，因为我现在正在使用 sass。

标签： html css sass clearfix

【解决方案1】：

由于浮动，问题即将到来。每当使用浮点数时，我们需要用户清除父级中的属性。

你的情况

.nav:after,
.nav:before{
   content: "";
   display: table;
   clear: both;
 }

【讨论】：