鍍金池/ 問答/HTML/ 為什么創(chuàng)建導(dǎo)航欄沒法指定背景色？

為什么創(chuàng)建導(dǎo)航欄沒法指定背景色？

代碼如下：

/* CSS */
body
{
    margin: 0;
}

#header
{
    margin: 0;
    padding: 0;
    background-color: #c6f0eb;
}

#header ul
{
    list-style-type: none;
    padding: 0;
    margin: 0 400px;
    background-color: #c6f0eb;
}

#header ul .logo
{
    float: left;
}

#header ul .logo a
{
    display: block;
    color: #2b2b2b;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}

#header ul li:not(.logo)
{
    float: right;
}

#header ul li:not(.logo) a
{
    display: block;
    color: #2b2b2b;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Title</title>
</head>
<body>
<div id="header">
  <ul>
    <li class="logo"><a href="#">Logo</a></li>
    <li><a href="#">標(biāo)簽1</a></li>
    <li><a href="#">標(biāo)簽2</a></li>
    <li><a href="#">標(biāo)簽3</a></li>
    <li><a href="#">標(biāo)簽4</a></li>
    <li><a href="#">標(biāo)簽5</a></li>
  </ul>
</div>
</body>
</html>

效果如下圖：

clipboard.png

剛從軟件轉(zhuǎn)過來，覺得html&css的布局套路看不懂，div 和 ul不是應(yīng)該根據(jù) li 自動(dòng)定義高度么？怎么F12看到的也是 0。

我是照著 https://www.w3schools.com/css... 來敲的，它的ul也沒指定高度，但是它的背景色也出來了，所以我猜測(cè)它是根據(jù)li來自適應(yīng)的，但事實(shí)并非如此。

還有【標(biāo)簽1】...【標(biāo)簽5】為啥順序不對(duì)啊。。。。

我寫的代碼有啥問題？請(qǐng)指教。

回答
編輯回答
雅痞

ul元素上加一個(gè) overflow:hidden就好了。
ul中的所有l(wèi)i都有float屬性，脫離文檔流，導(dǎo)致默認(rèn)狀態(tài)下ul不會(huì)被子元素?fù)纹稹?在（ul）高度為auto的情況下，加了overflow:hidden 屬性后，它就會(huì)計(jì)算其中的浮動(dòng)元素（li)高度，好決定如何裁剪父元素，父元素高度為auto，它就默認(rèn)裁剪到子元素的高度。

標(biāo)簽li的順序不對(duì)，是因?yàn)槟憬o后面的幾個(gè)li都用的float:right, 那么它就會(huì)將依次將元素移動(dòng)到行右側(cè)，如果發(fā)現(xiàn)右側(cè)已經(jīng)存在一個(gè)元素，它就會(huì)挨著放在它的左側(cè)。

2017年6月11日 19:44
編輯回答
久不遇

既然是剛開始學(xué)前端，我強(qiáng)烈建議樓主學(xué)習(xí) flex 和 grid，不要再去看這種十幾年前的浮動(dòng)定位了，那些年的 API 設(shè)計(jì)非常差，根本不打算讓人“布局”。

自薦一下 Web 永恒不變的主題：布局——Box，F(xiàn)lex，Grid，看完之后，題主再去看看 Bootstrap （最流行的前端庫(kù)）的實(shí)現(xiàn)，基本就可以了。

2017年3月15日 23:51
編輯回答
枕頭人

看不到你li寫的樣式，但我估計(jì)你是用了float:right;吧，浮動(dòng)會(huì)脫離正常文檔流的

2018年6月12日 08:12