爲什麼在CSS廢墟做「浮動」的背景顏色

當我使用這個，那麼背景色工作爲什麼在CSS廢墟做「浮動」的背景顏色

header { 
     background-color: #bab615; 

    } 
    nav { 
     background: #f96e5b; 
     width: auto; 
    } 
    nav ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     line-height: 1; 
     display: block; 
     zoom: 1; 
    }

，但如果我的浮動添加到「導航UL」例如向左飄浮;那麼它會使兩個元素的背景顏色變成白色......爲什麼？

 header { 
     background-color: #bab615; 

    } 
    nav { 
     background: #f96e5b; 
     width: auto; 
    } 
    nav ul { 
     list-style: none; 
     margin: 0; 
     padding: 0; 
     line-height: 1; 
     display: block; 
     zoom: 1; 
     float: left; <---This 
    }

編輯：改變#cssmenu淨值計算，因爲它是在HTML 編輯＃2導航：jsfiddle.net/5vjor56y

來源

2015-12-09 KaZyKa

嘗試添加清除：兩者;到#cssmenu。來自你的html/css代碼的jsfiddle例子會很有幫助。 – herrh

你能把這個CSS代碼和一個基本的HTML一起放在一個在線的例子中嗎？ – Ricardo

當然http://jsfiddle.net/5vjor56y/我已評論在css中的浮動 – KaZyKa

這聽起來像你需要內nav清除浮動元素下面放置。

您可以在CSS中做到這一點，像這樣：

nav { 
    overflow: hidden; 
}

這就是「clearfix」開始發揮作用。這是另一種方式來做到以上：

.nav:after { 
    content: ""; 
    display: table; 
    clear: both; 
}

的clearfix可能是做到這一點的最好辦法，因爲你並不需要創建HTML元素，其唯一目的是清除浮動元素。要更深入地瞭解爲什麼必須完成此操作，請參閱此css tricks article。

來源

2015-12-09 00:15:20 timothym

糟糕，請原諒重複的鏈接/內容@Set Sail Media發佈。 – timothym

下面是一篇詳細的文章，從CSS技巧，以及有關明確的修復 - https://css-tricks.com/snippets/css/clear-fix/ – timothym

需要清除浮動。

<div style="clear:both;"></div>

或

<br clear="all" />

兩種常用的方法。這應該立即浮動元素（S）的結束標記，即：

<nav> 
    <ul> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    <li><a href="#"></a></li> 
    </ul> 
    <div style="clear:both;"> 
</nav>

來源

2015-12-09 00:10:00

它的工作.. :) 你能解釋爲什麼我需要清除浮動？ – KaZyKa

當您浮動某些東西時，會破壞頁面上元素的自然流動。它們不會將高度添加到父容器元素。爲了恢復高度（以及因此背景和其他屬性），您需要清除。這裏有幾篇很好的文章，這個解釋很不錯：https://css-tricks.com/the-how-and-why-of-clearing-floats/ –

爲什麼在CSS廢墟做「浮動」的背景顏色

回答

相關問題