html - 使用 float 后的CSS定位

  <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徽标时遇到了问题。您可以从下面的CSS中看到我使用float：right定位导航栏，但是现在当我尝试设置Google徽标的样式时，它已将其放置在与导航栏相同的行上。因此，例如，当我居中时，它位于导航栏和左边界之间。我希望将其放置在下面的块中。

下面的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 {
}

最佳答案

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

   #google-logo {
        clear:both;
    }

清除两者都会以“ display：block”类型的方式将非浮动元素与浮动元素分开。

关于html - 使用 float 后的CSS定位，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48552959/