当我添加 float: right;对于我的代码，我丢失了主容器的高度，即 <nav> 标签？

Question

当我将 float: right; 添加到我的代码时，我丢失了主容器的 height，即 <nav> 标签。我该如何解决这个问题？

这是我的代码：

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 20px 40px;
  background-color: #333;
  position: relative;
}

.nav-ul {
  display: block;
  float: right;
}
  
.nav-li {
  display: inline;
  list-style: none; 
}

.nav-li .nav-links{
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  margin-left: 40px;
}

<html>
  <head>
    <title>NavBar</title>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    
  </head>
  <body>
    <nav>
      <ul class="nav-ul">
        
        <li class="nav-li">
          <a href="#" class="nav-links">Home</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Products</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Shop</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">About Us</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Contact Us</a>
        </li>
        
      </ul>
    </nav>
  </body>
</html>

Answer 1

Remove float:right from .nav-ul and add text-align:right to nav

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav {
  margin: 0;
  padding: 20px 40px;
  background-color: #333;
  position: relative;
  text-align: right;
}

.nav-ul {
  display: block;
}
  
.nav-li {
  display: inline;
  list-style: none; 
}

.nav-li .nav-links{
  color: #fff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  margin-left: 40px;
}

<html>
  <head>
    <title>NavBar</title>
    
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    
  </head>
  <body>
    <nav>
      <ul class="nav-ul">
        
        <li class="nav-li">
          <a href="#" class="nav-links">Home</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Products</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Shop</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">About Us</a>
        </li>
        
         <li class="nav-li">
          <a href="#" class="nav-links">Contact Us</a>
        </li>
        
      </ul>
    </nav>
  </body>
</html>

Read More about float

Answer 2

见the specification:

float 的设计不会影响容器的高度。这样一来，例如，您可以拥有一个从一个段落开始到另一个段落结束的图像。

它不是通用的布局工具。如果您想并排放置两个元素，请改用 flexbox。

body {
 display: flex;
}

nav { background: #aaa; }

<nav>
  Nav
</nav>
<main>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
  <p>The quick brown fox jumps over the lazy dog</p>
</main>

当我添加 float: right;对于我的代码，我丢失了主容器的高度，即 <nav> 标签？

When I add float: right; to my code, I lose the height of my main container i.e. the <nav> tag?

html

css

css-float

nav