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包围浮动子元素。

您可以在What methods of ‘clearfix’ can I use?

找到有关明确修复解决方案的更多信息

float：左边的CSS属性打破样式？

2 个答案: