为什么header，container和navbar div在ul div之上？

Question

我在定位ul div时遇到了麻烦。我试着将它漂浮到左侧以将其定位在那里。但它在标题，容器和导航栏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

  

如果父元素只包含浮动元素，则其高度将折叠为空。

<强>溶液

  

方法1）overflow: auto;

.navbar {

    width:100%;

    border: 2px solid green;

    overflow: auto; 

}

  

方法2）使用:after伪

.navbar:after {

        display: block;

        content: '';

        clear: both;
}

完整代码：

＆＃13;

＆＃13;

    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; 
         overflow: auto; 

    }

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

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

＆＃13;

	<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用float属性时，父高不会看到其高度。因此，在您的情况下，标题div（和上面的父级）具有height = 0px（如果您不使用任何填充属性）。因此，您需要在ul标记后设置<br clear='both;'>。然后它会正常工作。

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>