html - 使用 float 后的 CSS 定位

Question

  <div class="container">
    <nav>
      <ul>
        <li><a class="nav-link" href="#">Gmail</a></li>
        <li><a class="nav-link" href="#">Images</a></li>
        <li><a id="nav-dots" href="#"><img src="./img/dots.jpg"></a></li>
        <li><a id="sign-in" href="#">Sign in</a></li>
      </ul>
    </nav>
  </div>

  <section id="google-logo">
    <div class="container">
      <img src="./img/logo.jpg" alt="Google Logo">
    </div>
  </section>

大家好，我正在尝试复制 Google 主页，但在定位 Google Logo 时遇到了问题。您可以从下面的 CSS 中看到，我使用 float:right 来定位导航栏，但现在当我尝试设置 Google Logo 的样式时，它已将它放置在与导航栏相同的行上。因此，当我将它居中时，它位于导航栏和左边距之间。我希望将其定位为下方的一个 block 。

下面的 CSS:

body {
  margin:0;
  padding:0;
  font-family:Arial;
}

/*GLOBAL */
.container {
  width:96%;
  margin:auto;
  text-align: center;
}

ul {
  padding:0;
  margin:0;
}

/* NAV */
nav {
  float: right;
  width: auto;
  margin-top: 17px;
}

nav li {
  display:inline;
}

nav .nav-link {
  text-decoration:none;
  color: #222;
  font-size: 13px;
  letter-spacing: 0.02em;
  margin-right: 7px;
}

nav #nav-dots {
  position: relative;
  top: 5px;
  margin: 0 18px 0 10px;
}

nav #sign-in {
  text-decoration: none;
  color: #fff;
  background-color: #4787ED;
  padding: 7px 12px 8px 12px;
  font-size: 13px;
  font-weight: bold;
  border-radius: 3px;
}

#google-logo {
}

Answer 1

您可以在 #google-logo 上使用 clear:both; 属性。

   #google-logo {
        clear:both;
    }

清除两者将以“显示: block ”类型的方式从 float 元素中分离非 float 元素。