爲什麼header，container和navbar div在ul div之上？

我在定位ul div時遇到了問題。我嘗試將它浮動到左側以將其放置在那裏。但它在標題，容器和導航欄div下面。而divs完全在ul div之上。爲什麼？爲什麼header，container和navbar 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>

來源

2017-05-27 jonmo1990

您可能需要閱讀本https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context和https：// CSS-技巧。 com/all-about-floats/:)（overflow：hiden，or float：left;或display：table or elsse from your reading applied to header will fix the behavior of header and wrap the floatinging child –

如果父元素包含什麼，但浮動元素，其高度崩潰不了了之。

溶液：

方法:after僞1）overflow: auto;

.navbar { 

    width:100%; 

    border: 2px solid green; 

    overflow: auto; 

}

方法2）使用

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

來源

2017-05-27 09:27:10 Ehsan

當你使用float屬性，父高度將看不到它的高度。所以在你的情況下，頭div（和上面的父）具有高度= 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>

來源

2017-05-27 09:38:42 HTCom

爲什麼header，container和navbar div在ul div之上？

回答

相關問題