Фоновый цвет CSS не влияет на DIV

Ответ 1

Так как внешний div содержит только плавающие divs, он отображает с 0 высотой. Либо дайте ему высоту, либо установите ее переполнение в скрытое.

Ответ 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 содержит только float. Поплавки удаляются из нормального потока. Таким образом, внешний 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.

Ответ 3

Без поплавков (и ненужных div):

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

Если вы используете float, вы должны плавать внешний div и указывать ширину.

Ответ 4

Поплавки не имеют высоты, поэтому содержащий div имеет высоту 0.

<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>

overflow: скрытый очищает float для большинства браузеров.

zoom: 1 очищает float для IE.

Ответ 5

Это очень старый вопрос, но стоит добавить, что у меня была аналогичная проблема, когда цвет фона в элементе footer в моем случае не отображался. Я добавил position: relative, который работал.