如何将两个div垂直分开？

Question

当我为导航栏创建一个div时，我还考虑制作一个代表网站左侧的第二个div，类为“left”。

#nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}




.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
}

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

<div class="left"></div>

我的问题是：如何将“导航栏”div与“left”div分开？

Answer 1

＆＃13;

＆＃13;

#nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}




.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
<br>
<div class="left"></div>

＆＃13;

＆＃13;

＆＃13;

你的意思是这样的，只有一个简单的<br>？

＆＃13;

＆＃13;

#nav {
  height: 55px;
  background-color: green;
}

#nav ul {
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#nav ul li a {
  text-decoration: none;
  float: left;
  padding: 10px;
  line-height: 35px;
  font-size: 20px;
  display: inline-block;
  color: yellow;
}

#nav ul li a:hover {
  color: red;
  background-color: black;
}

.left {
  height: 260px;
  width: 100px;
  background-color: red;
  padding: 10px;
  border-radius: 2px;
  float: left;
  margin-top: 2%;
}

＆＃13;

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>
<br>
<div class="left"></div>

＆＃13;

＆＃13;

＆＃13;

或者，margin-top？