¿Por qué se ignora el margen superior del elemento html después del elemento flotante?

Tengo una página con 2 divs. El primero está flotando. El segundo tiene una statement de CSS “clara: ambas” y un gran margen superior. Sin embargo, cuando veo la página en Firefox o IE8, no veo el margen superior. Parece que el segundo div está tocando el primer div, en lugar de estar separado. ¿Hay alguna manera de hacer que el margen superior funcione correctamente?

He leído las especificaciones de CSS y he notado que dice “Como un flotador no está en el flujo, las cajas de bloques no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si el flotador no existiera”. Sin embargo, no sé qué hacer al respecto.

Aquí hay un ejemplo:

   CSS test   
foo
This div should not touch the other div.

Has identificado correctamente el problema. El

flotante ya no se usa para calcular el margen superior y, por lo tanto, los 2

solo se topan uno contra el otro. Una forma simple de resolver esto es simplemente para envolver el 2do

. Esto permitirá que el contenedor quede (invisiblemente) a tope con el primer

y le permita especificar un espacio en blanco para él.

El truco para hacer que la envoltura funcione correctamente es tener el espacio en blanco como espacio en blanco interno. En otras palabras, el contenedor usa relleno en lugar de margen. Esto significa que lo que esté pasando fuera del contenedor (como otros elementos flotantes) no importará realmente.

 
foo
This div should not touch the other div.

puedes simplemente agregar un div entre ellos

 
foo
This div should not touch the other div.

y eso debería encargarse de eso.

Muchos de los temas de WordPress (y no solo) emplean esta técnica

En el segundo div:

 float: none; display: inline-block; 

Tabla de compatibilidad para navegadores: http://caniuse.com/#feat=inline-block

Un claro abierto; sin contenedores, ni extra

Otra respuesta fue casi correcta, pero omitió un width: 100% . Aquí está la versión corregida.

 h1 { clear: both; display: inline-block; width: 100%; } 

Borra sin este width: 100% requiere que el elemento flotante esté en un contenedor bien marcado o necesita un

extra semánticamente vacío. Por el contrario, la separación estricta de contenido y marcado requiere una solución CSS estricta a este problema, es decir, sin ningún HTML no semántico adicional.

El mero hecho de que uno necesite marcar el final de un flotador no permite la composición desatendida .

Si este último es su objective, el flotador debe dejarse abierto para cualquier cosa (párrafos, listas ordenadas y desordenadas, etc.) para envolverlo, hasta que se encuentre un claro. En el ejemplo anterior, el claro está establecido por un nuevo encabezado.

Esta solución se usa ampliamente en mi sitio web para resolver el problema cuando el texto junto a una miniatura flotante es corto y no se respeta el margen superior del siguiente objeto de limpieza. También evita cualquier intervención manual cuando se generan automáticamente archivos PDF desde el sitio.

establecer “float: left” en el segundo div

El problema es que el segundo div solo puede calcular un margen a partir de un elemento no flotante. Debe agregar cualquier elemento no flotante antes de intentar establecer el margen. Un espacio sin ruptura o un salto de línea fuera del div flotante y antes de que funcione el segundo div.

     CSS test     
foo
This div should not touch the other div.

Otra forma es agregar un párrafo vacío con claro después del último div flotante.

 

Agregue esto debajo del div flotante y encima del que desea presionar hacia abajo la página:

 

Luego, en su archivo CSS, agregue:

 .clearfix {clear: both;} 

Esto, de hecho, crea un elemento invisible que el margen de su segundo div puede reactjsr, esto es algo que he visto en varios sitios de WordPress. También tiene la ventaja de proporcionarle un lugar (es decir, dentro del elemento clearfix div) para colocar elementos divisorios, como bordes, etc.