texto - El color de fondo CSS no tiene efecto en un DIV

cómo se define un color de fondo para todas las etiquetas h1 en css

Question

Hola Mundo

¿Por qué el color de fondo no se muestra como negro? No puedo establecer el ancho y flotar, ¿es posible sin ellos?

Gracias por tu tiempo.

Answer 1

Cambiarlo a:

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

Básicamente el div exterior solo contiene flotadores. Los flotadores se eliminan del flujo normal. Como tal, el div exterior realmente no contiene nada y por lo tanto no tiene altura. Realmente es negro pero no puedes verlo.

El desbordamiento: la propiedad oculta básicamente hace que el div exterior encierre los flotadores. La otra forma de hacer esto es:

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

Ah, y solo para estar completo, realmente debería preferir las clases a los estilos CSS directos.

Answer 2

Dado que el div exterior solo contiene divs flotados, se procesa con 0 altura. Dale una altura o configura su desbordamiento en oculto.

Answer 3

Esta es una pregunta muy antigua pero vale la pena agregar que acabo de tener un problema similar en el que no se mostraba el color de fondo de un elemento de footer en mi caso. Añadí una position: relative que funcionó.

Answer 4

Los flotadores no tienen una altura, por lo que el div que contiene tiene una altura de cero.

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

desbordamiento: oculto borra el flotador para la mayoría de los navegadores.

zoom: 1 despeja el flotador para IE.

Answer 5

Sin flotadores (y divs innecesarios):

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

Si usa flotadores, debe hacer flotar el div exterior y especificar los anchos.