为什么这个 div 没有背景色？

Question

这里有我div的完整示例。

为什么footer没有从父元素(container)继承背景颜色？

- kwichz

---

你永远不应该直接在 div 中放置文本。你应该始终在文本周围放置一个“p”标签。 - Raffael Luthiger

@Raffael：你为什么这样想？如果你把它放在<p>标签中，那么就会生成更多的DOM元素，但并不会带来任何好处。如果你将其保留为简单文本，则它只是DOM中的文本节点。<p>标签还有一些不好的默认样式，通常需要去掉... - Skorpioh

@Raffael Luthiger：我不同意那个观点。抱歉。 - kwichz

我也不赞同在没有特定目的的父元素的情况下添加另一个元素。 - Alp

Answer 1

当您将一个元素float时，它就像与父元素断开连接一样。因此，无法继承inherit的值。此外，父元素停止扩展到子元素的高度。去掉float后，您可以看到它正常工作。

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

请记住，您可以在footer后面再放置另一个<div style="clear: both"></div>，如另一个答案所示，但这只是一个技巧，以使父元素能够跟随子元素的高度。

- Erick Petrucelli

---

是的，浮动元素不会对其父元素的布局产生影响。在这种情况下，“容器”没有任何对其高度做出贡献的元素，因此它的高度保持为“0”。 - Dan Manastireanu

我和Dan Manastireanu在一起：父级div的高度仍为零，这可能会导致意外的结果。 - Alp

Answer 2

您需要清除浮动的 div：http://jsfiddle.net/74MvW/14/

- Alp

---

请注意不要使用没有自闭标签的 <div />。一些浏览器会不喜欢它来阻塞元素。 - user736619

Answer 3

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

您必须要么去掉浮动，要么在 footer div 后面添加一个 clearer div，就像这样：

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

- Skorpioh

Answer 4

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

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

演示。

一些 CSS 属性默认是继承的（例如 font-family）；其他具有默认属性。在 background-color 的情况下，默认值为 transparent。如果您希望该属性被继承，必须明确说明。

- lonesomeday

---

虽然我喜欢继承的解决方案，但是还存在一个问题。由于单个浮动内容没有清除元素的存在，.container div仍然具有0px的高度。这不应该是这种情况。例如，如果.container具有边框，则它将无法正确包裹在.footer周围。 - Alp

@Alp 确实。我在这个答案中的目标是提供一个“有趣的替代观点”，而不是“所有永远都有确定答案”。;-) - lonesomeday