ヘッダー、コンテナ、およびnavbar divがul divの上にあるのはなぜですか？

Question

ul divの配置に問題があります。私はそれをそこに置くために左に浮かべてみました。しかし、ヘッダー、コンテナ、およびnavbar 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; 
} 

全コード：

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

\t <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 2

あなたはフロートプロパティを使用すると、親の高さは、その高さは表示されません。したがって、あなたの場合、ヘッダーdiv（および親の上）はheight = 0px（パディングプロパティを使用しない場合）です。したがって、ulタグの後に<br clear='both;'>を設定する必要があります。その後正常に動作します。 // CSS-トリック：

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>