margin-top no funciona con clear: ambos

Left
Right
Main Data

¿Por qué el margin:top para ‘Datos principales’ no funciona en el código anterior?

Podrías poner los dos divs flotantes en otro que tenga el conjunto “overflow: hidden”:

 
Left
Right
Main Data

Mientras que Pointy muestra cómo puedes envolver los flotadores en un div, alternativamente puedes insertar un div vacío entre los flotadores y la sección de datos principal. Por ejemplo:

 
Left
Right
Main Data

Esto podría ser útil en los casos en que no es deseable agregar un envoltorio div alrededor de HTML.

La lógica detrás de esto en la especificación es alucinante, e implica una interacción complicada de las reglas para la liquidación y el colapso de los márgenes .

Probablemente esté familiarizado con el modelo de caja de CSS convencional, en el que el cuadro de contenido está dentro de un cuadro de relleno dentro de un cuadro de borde dentro de un cuadro de margen :

Diagrama del modelo de caja

Para elementos con clear definido en algo distinto de none , un componente adicional puede ser introducido a este modelo: autorización .

Los valores distintos de ‘ninguno’ potencialmente introducen la autorización . La separación inhibe el colapso de los márgenes y actúa como un espaciado por encima del margen superior de un elemento.

En otras palabras, el modelo de caja en esos casos realmente se parece más a esto:

Modelo de caja con 'espacio libre' agregado encima de la parte superior del recuadro de margen

Pero, ¿cuándo se introduce la autorización y qué tan grande debería ser? Comencemos con la primera de esas preguntas. La especificación dice :

La computación de la separación de un elemento sobre el que se establece “claro” se realiza al determinar primero la posición hipotética del borde del borde superior del elemento. Esta posición es donde habría estado el borde del borde superior real si la propiedad ‘clara’ del elemento hubiera sido ‘ninguna’.

Si esta posición hipotética del límite del borde superior del elemento no supera los flotantes relevantes, se introduce el margen y los márgenes colapsan de acuerdo con las reglas de 8.3.1.

Vamos a aplicar esta lógica a la pregunta del código de asker. Recuerde, estamos tratando de explicar la posición del tercer div en el siguiente código (fondos agregados para ayudar en la visualización):

 
Left
Right
Main Data

Pointy y Randall Cook tienen excelentes respuestas. Pensé que mostraría una solución más.

 
Left
Right
Main Data

Si haces que el 3º elemento “flote: izquierda”; Y “clear: both;”, debería tener el efecto deseado de dar al tercer elemento un margen de 200 píxeles. Aquí hay un enlace a un ejemplo.

Esto también puede afectar a otros elementos de seguimiento en cuanto a si deben ser flotantes o no. Sin embargo, también podría tener el efecto deseado.

Solución alternativa:

En realidad, puedes poner un margin-bottom en los elementos flotados para empujar hacia ABAJO el elemento que está debajo que tiene clear: both .

http://jsfiddle.net/9EY4R/

enter image description here

Nota: Después de haber hecho esta sugerencia, tengo que retractarme inmediatamente ya que generalmente no es una buena idea, pero en algunas situaciones limitadas puede ser apropiada;


 
Your order will be shipped to:
Simon 123 Main St
Anytown, CA, US
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

El panel con elementos se llama order-details con este css

 .order-details { padding: .5em; background: lightsteelblue; float: left; margin-left: 1em; /* this margin does take effect */ margin-bottom: 1em; } 

En el violín anterior, el panel amarillo tiene un margin-top , pero a menos que sea más grande que el elemento flotante más alto, entonces no hará nada (por supuesto, ese es el objective de esta pregunta).

Si establece el margin-top del panel amarillo en 20em, entonces será visible porque el margen se calcula desde la parte superior del cuadro azul exterior.

Use ‘padding-top’ en su div principal de datos en su lugar. O, como alternativa, ajuste el div principal de datos en uno con ‘padding-top’.

Intente establecer un margen inferior en uno de los elementos flotantes. Alternativamente, puede envolver los flotantes en un elemento padre y usar un hack css para borrarlo sin marcas adicionales .

En ocasiones, una combinación de posición relativa y margen puede resolver este tipo de problemas.

Utilizo esta técnica para mis clases de alineamiento y alineación en WordPress.

Por ejemplo, si quiero un “margen inferior” que respeten los elementos de limpieza que puede usar.

 .alignright{ float: right; margin-left: 20px; margin-top: 20px; position: relative; top: -20px; } 

Para su ejemplo, podría hacer algo como

 
Left
Right
Main Data