为什么这个div没有得到背景？

Question

Here我的div有整个例子。

为什么footer没有从父（container）获取背景颜色？

Answer 1

当你float一个元素时，这就像它与父元素断开连接一样。因此，inherit值无法继承。此外，父母停止扩展到儿童身高。删除float，您可以看到它正常工作。

但如果您确实需要float，则需要将background-color放在footer上。

请记住，您可以在<div style="clear: both"></div>之后将另一个footer放在另一个答案上，但这只是一个伎俩，父母可以跟随孩子的身高。

Answer 2

您必须清除浮动div：http://jsfiddle.net/74MvW/14/

Answer 3

它没有获得bg颜色，因为“容器”div具有背景，但“footer”div向左浮动，这意味着它不会影响“容器”div的高度。

你必须摆脱浮动或者只是在页脚div之后添加一个更清晰的div：

<div class="container">
    <div class="footer">
        Hello
    </div>
    <div style="clear:both;float:none;"><!-- Clearer --></div>
</div>

Answer 4

正如其他答案所提到的，问题是float值。解决这个问题的最好办法是将.footer div设置为“继承”父级的背景：

.footer {width:910px; height:150px; float:left; background: inherit}

Demo

默认情况下会继承一些CSS属性（例如font-family）;其他人有默认属性。对于background-color，默认值为transparent。如果您希望继承该属性，则必须明确说明。