html - 为什么标题、容器和导航栏 div 位于 ul div 之上？

Question

我在定位 ul div 时遇到问题。我尝试将它 float 到左侧以将其定位在那里。但它位于标题、容器和导航栏 div 的下方。而且div都完全在ul div之上。为什么？

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  background-color: grey;
  margin: 0;
  padding: 0;
}

#container {
  width: 80%;
  margin: auto;
  height: auto;
  border: 1px solid red;
}

#header {
  width: 100%;
  border: 2px solid blue;
}

.navbar {
  width: 100%;
  border: 2px solid green;
}

ul {
  margin: 0;
  padding: 0;
  float: left;
}

li {
  display: inline;
  font-size: 20px;
}

<div id="container">
  <div class="header">

    <div class="navbar">
      <ul>
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        <li><a href="#">NAV3</a></li>
      </ul>
    </div>

  </div>
</div>

Answer 1

当你使用 float 属性时，父高度将看不到它的高度。因此，在您的情况下，标题 div(以及父级上方)的高度=0px(如果您不使用任何填充属性)。因此，为此，您需要设置 <br clear='both;'>在 ul 标签之后。然后就可以正常工作了。

html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  background-color: grey;
  margin: 0;
  padding: 0;
}

#container {
  width: 80%;
  margin: auto;
  height: auto;
  border: 1px solid red;
}

#header {
  width: 100%;
  border: 2px solid blue;
}

.navbar {
  width: 100%;
  border: 2px solid green;
}

ul {
  margin: 0;
  padding: 0;
  float: left;
}

li {
  display: inline;
  font-size: 20px;
}

<div id="container">
  <div class="header">

    <div class="navbar">
      <ul>
        <li><a href="#">NAV1</a></li>
        <li><a href="#">NAV2</a></li>
        <li><a href="#">NAV3</a></li>
      </ul><br clear='both'>
    </div>

  </div>
</div>