CSS background-color对DIV没有影响

Question

你好     世界     

为什么背景颜色不显示为黑色？我不能设置宽度和浮动，没有它们可能吗？

感谢您的时间。

Answer 1

由于外部div只包含浮动的div，因此它呈现0高度。要么给它一个高度，要么将它的溢出设置为隐藏。

Answer 2

将其更改为：

<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>

外部div基本上只包含浮点数。浮子从正常流动中移除。因此，外部div实际上没有任何东西，因此没有高度。它真的很黑，但你看不到它。

溢出：隐藏属性基本上使外部div包含浮点数。另一种方法是：

<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>

哦，为了完整起见，你应该更喜欢用类来指导CSS样式。

Answer 3

没有花车（和不必要的div）：

<div style="background-color:black;" onmouseover="this.bgColor='white'">
    hello world
</div>

如果使用浮点数，则必须浮动外部div并指定宽度。

Answer 4

浮点数没有高度，因此包含div的高度为零。

<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>

溢出：隐藏清除大多数浏览器的浮动。

zoom：1清除IE的浮动。

Answer 5

这是一个非常古老的问题，但值得补充的是，我刚刚遇到类似的问题，我的案例中footer元素的背景颜色没有显示。我添加了一个有效的position: relative。