html - formulario - margin collapse css
¿Por qué el margen superior del elemento html se ignora después del elemento flotado? (8)
Tengo una página con 2 divs. El primero es flotado. El segundo tiene una declaración 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 la especificación de CSS y he notado que dice "Dado que un flotador no está en el flujo, las cajas de bloque no posicionadas creadas antes y después de la caja flotante fluyen verticalmente como si no existiera". Sin embargo, no sé qué hacer al respecto.
Aquí hay un ejemplo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
Un claro abierto; sin contenedores, ni extra <div>
Otra respuesta fue casi correcta, pero perdió un width: 100% . Aquí está la versión corregida.
h1 {
clear: both;
display: inline-block;
width: 100%;
}
Limpia sin este width: 100% requiere que el elemento flotado esté en un contenedor bien marcado o necesita un <div> extra semánticamente vacío. A la inversa, la separación estricta de contenido y marcado requiere una solución CSS estricta para este problema, es decir, sin ningún HTML adicional no semántico.
El mero hecho de que uno tiene que marcar el final de un flotador, no permite la composición desatendida .
Si este último es su objetivo, el flotador debe dejarse abierto para que cualquier cosa (párrafos, listas ordenadas y desordenadas, etc.) lo envuelva, hasta que se encuentre una clara. En el ejemplo anterior, la compensación se establece mediante un nuevo encabezado.
Esta solución se usa ampliamente en mi sitio web para resolver el problema cuando el texto al lado de una miniatura flotante es corto y el margen superior del siguiente objeto de compensación no se respeta. También evita cualquier intervención manual al generar automáticamente PDFs desde el sitio.
Agregue esto debajo del div flotado y encima del que desea empujar hacia abajo en la página:
<div class="clearfix"></div>
Luego en su archivo css agregue:
.clearfix {clear: both;}
En efecto, esto crea un elemento invisible contra el cual puede reaccionar el margen de su segundo div. Esto es algo que he visto en varios sitios de Wordpress. También tiene la ventaja de proporcionarle un lugar (es decir, dentro del div Clearfix) para colocar cualquier elemento de división, como bordes, etc.
El problema es que la segunda división solo puede calcular un margen desde un elemento no flotante. Debe agregar cualquier elemento no flotante antes de intentar establecer el margen. Un espacio de no ruptura o un salto de línea fuera de la división flotante y antes de la segunda división funcionará.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS test</title>
</head>
<body>
<div style="float: left; border: solid red 1px; height:40px;">foo</div>
<div style="clear: both; margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
</body>
</html>
En el segundo div:
float: none; display: inline-block;
Tabla de compatibilidad para navegadores: http://caniuse.com/#feat=inline-block
Has identificado correctamente el problema. El <div> flotado ya no se usa para calcular el margen superior, y por lo tanto, el 2 <div> está a tope uno contra el otro. Una forma sencilla de resolver esto es simplemente envolver la segunda <div> . Esto permitirá que el envoltorio se tope (invisiblemente) con el primer <div> , y le permitirá especificar un espacio en blanco para él.
El truco para hacer que la envoltura funcione correctamente es que el espacio en blanco sea espacio en blanco interno. En otras palabras, la envoltura utiliza relleno en lugar de margen. Esto significa que lo que esté sucediendo fuera de la envoltura (como otros elementos flotantes) realmente no importará.
<div style="float: left; border: solid red 1px">foo</div>
<div class="wrapper" style="clear: both; padding-top: 90px;">
<div style="border: solid red 1px">This div should not touch the other div.</div>
</div>
establecer "float: left" en el segundo div
otra forma es agregar un párrafo vacío con borrar ambos después del último div flotado.
<p style="clear:both"></p>
simplemente podría agregar un div entre ellos
<div style="float: left; border: solid red 1px">foo</div>
<div style="clear:both;"></div>
<div style="margin-top: 90px; border: solid red 1px">This div should not touch the other div.</div>
Y eso debería hacerse cargo de ello.
Muchos de los temas de WordPress (y no solo) emplean esta técnica