float：left CSS屬性是否破壞樣式？

Question

為什么float:left CSS屬性會破壞樣式？

<div id="application_header">
  <div>logo</div>
  <div><h5>tagline</h5></div>
</div>

#application_header > div由於以下原因導致無法應用#application_header背景屬性： float:left ？

.clear  { clear:both; }
.push   { clear: both; height: 20px;}

#application_header { display:block; background-color: #000; }
    #application_header > div { float: left; }

#application_header僅接受background-color: #000; 屬性，如果float:left被刪除...請解釋...？

Answer 1

div＃application_header沒有高度，因為其中包含的元素是浮動的。

我做了一個小提琴，演示了如何向div添加高度：

div#application_header { 
    height: 100px; 
    display:block; 
    background-color: #000; 
    color: #fff 
}

http://jsfiddle.net/YGkw7/

與其浮動元素，不如將它們設置為內聯塊

http://jsfiddle.net/YGkw7/2/

Answer 2

您的背景顏色未顯示的原因是，由於#application_header僅包含浮動子元素，因此折疊為零高度和寬度。 您需要研究一個明確的解決方案，以使父div環繞浮動子元素。

您可以在以下方法中找到有關清除修復解決方案的更多信息： 我可以使用哪種“清除修復”方法？