html - superponen - ¿Cómo evitas que los padres de elementos flotantes se colapsen?




posicionamiento absoluto (11)

Solución 1:

El método más confiable y discreto parece ser este:

Demostración: http://jsfiddle.net/SO_AMK/wXaEH/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
}

Con un poco de orientación CSS, ni siquiera necesita agregar una clase al DIV principal.

Esta solución es compatible con versiones anteriores de IE8, por lo que no necesita preocuparse por los fallos de los navegadores antiguos.

Solución 2:

Se ha sugerido una adaptación en la solución 1 y es la siguiente:

Demostración: http://jsfiddle.net/wXaEH/162/

HTML:

<div class="clearfix">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>
</div>​

CSS:

.clearfix::after { 
   content: " ";
   display: block; 
   height: 0; 
   clear: both;
   *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML += '<div class="ie7-clear"></div>' );
}

.ie7-clear {
    display: block;
    clear: both;
}

Esta solución parece ser compatible con versiones anteriores a IE5.5 pero no está probada.

Solución 3:

También es posible configurar la display: inline-block; y width: 100%; para emular un elemento de bloque normal mientras no se colapsa.

Demostración: http://jsfiddle.net/SO_AMK/ae5ey/

CSS:

.clearfix {
    display: inline-block;
    width: 100%;
}

Esta solución debería ser compatible con versiones anteriores a IE5.5, pero solo se ha probado en IE6.

Esta pregunta ya tiene una respuesta aquí:

Aunque los elementos como <div> normalmente crecen para adaptarse a sus contenidos, el uso de la propiedad float puede causar un problema sorprendente para los novatos en CSS: si los elementos flotantes tienen elementos primarios no flotados, el elemento primario se colapsará.

Por ejemplo:

  <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

El div principal en este ejemplo no se expandirá para contener sus hijos flotantes; parecerá que tiene height: 0 .

¿Cómo resuelves este problema?

Me gustaría crear una lista exhaustiva de soluciones aquí. Si tiene conocimiento de problemas de compatibilidad entre navegadores, indíquelos.

Solución 1

Flota el padre.

  <div style="float: left;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
    </div>

Pros : Código semántico.
Contras : Es posible que no siempre quieras que el padre flote. Incluso si lo hace, ¿hace flotar al padre de los padres, y así sucesivamente? ¿Debes flotar cada elemento ancestro?

Solucion 2

Dar a los padres una altura explícita.

    <div style="height: 300px;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Pros : Código semántico.
Contras : no es flexible: si el contenido cambia o si se cambia el tamaño del navegador, el diseño se romperá.

Solucion 3

Agregue un elemento "espaciador" dentro del elemento padre, como este:

    <div>
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>
        <div class="spacer" style="clear: both;"></div>
    </div>

Pros : Sencillo de codificar.
Contras : no semántico; el div espaciador existe sólo como un hack de diseño.

Solucion 4

Establecer padre para overflow: auto .

   <div style="overflow: auto;">
        <div style="float: left;">Div 1</div>
        <div style="float: left;">Div 2</div>        
    </div>

Pros : No requiere div extra.
Contras : parece un hackeo, ese no es el propósito declarado de la propiedad de overflow .

¿Comentarios? ¿Otras sugerencias?


Aunque el código no es perfectamente semántico, creo que es más sencillo tener lo que yo llamo una "división de compensación" en la parte inferior de cada contenedor con flotadores. De hecho, he incluido la siguiente regla de estilo en mi bloque de reinicio para cada proyecto:

.clear 
{
   clear: both;
}

Si está diseñando para IE6 (que Dios lo ayude), es posible que desee darle a esta regla un alto de línea y altura de 0px también.


El principal problema que puede encontrar al cambiar el desbordamiento a auto u hidden es que todo puede ser desplazable con el botón central del mouse y un usuario puede desordenar todo el diseño del sitio.


El problema ocurre cuando un elemento flotante está dentro de un cuadro contenedor, ese elemento no fuerza automáticamente el ajuste de altura del contenedor al elemento flotado. Cuando un elemento se hace flotar, su elemento principal ya no lo contiene porque el elemento flotante se elimina del flujo. Puedes usar 2 métodos para arreglarlo:

  • { clear: both; }
  • clearfix

Una vez que entienda lo que está sucediendo, use el método a continuación para "arreglarlo".

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Demostración :)


Extraño, nadie ha encontrado una respuesta completa para esto todavía, bueno, aquí está.

Solución uno: claro: ambos

Añadiendo un elemento de bloque con el estilo clear: both; sobre él borrará los flotadores más allá de ese punto y evitará que el elemento primario de ese elemento se derrumbe. http://jsfiddle.net/TVD2X/1/

Pros: Le permite borrar un elemento y los elementos que agregue a continuación no se verán afectados por los elementos flotantes de arriba y css válido.

Contras: Requiere la otra etiqueta para despejar los flotadores, marcas de hinchazón.

Nota: Para volver a IE6 y para que funcione con los padres abstinentes (es decir, el elemento de entrada) no puede utilizar: después.

Solución dos: pantalla: tabla

Añadiendo display: tabla; a los padres para hacer que se encogan de hombros y se muestren con la altura correcta. http://jsfiddle.net/h9GAZ/1/

Pros: No hay margen adicional y es mucho más ordenado. Funciona en IE6 +

Contras: Requiere css no válido para asegurarse de que todo funcione bien en IE6 y 7.

Nota: IE6 y 7 anchos automáticos se usan para evitar que el ancho sea 100% + relleno, lo cual no es el caso en los navegadores más nuevos.

Una nota sobre las otras "soluciones".

Estas correcciones regresan al navegador con soporte más bajo, más del 1% de uso global (IE6), lo que significa que usar: después no lo corta.

El desbordamiento oculto muestra el contenido pero no evita que el elemento se colapse y, por lo tanto, no responde la pregunta. El uso de un bloque en línea puede tener resultados con errores, los niños con márgenes extraños, etc., la mesa es mucho mejor.

Establecer la altura "evita" el colapso pero no es una solución adecuada.

Css inválido

CSS inválido nunca hace daño a nadie, de hecho, ahora es la norma. El uso de los prefijos del navegador es tan inválido como el uso de hacks específicos del navegador y no afecta al usuario final.

En conclusión

Utilizo las dos soluciones anteriores para hacer que los elementos reaccionen correctamente y jueguen bien entre sí, les imploro que hagan lo mismo.


Hay varias versiones de Clearfix, con Nicolas Gallagher y Thierry Koblentz como autores clave.

Si desea soporte para navegadores más antiguos, es mejor usar este clearfix:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

En SCSS, debe utilizar la siguiente técnica:

%clearfix {
  &:before, &:after {
    content:" ";
    display:table;
  }

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

Si no te importa el soporte para navegadores antiguos, hay una versión más corta:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

Mi método favorito es usar una clase de clearfix para el elemento padre

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

Normalmente uso el overflow: auto trick; aunque eso no es, estrictamente hablando, el uso previsto para el desbordamiento, está algo relacionado, lo suficiente para que sea fácil de recordar, sin duda. El significado de float: left se ha extendido para varios usos de manera más significativa que el desbordamiento en este ejemplo, IMO.


Una de las soluciones más conocidas es una variación de su solución número 3 que utiliza un pseudo elemento en lugar de un elemento html no semántico.

Es algo parecido a esto...

.cf:after {
    content: " ";
    display: block;
    visibility: hidden;
    height: 0;
    clear: both;
}

Coloca eso en tu hoja de estilo, y todo lo que necesitas es agregar la clase 'cf' al elemento que contiene los flotadores.

Lo que uso es otra variación que viene de Nicolas Gallagher.

Hace lo mismo, pero es más corto, se ve más ordenado y quizás se usa para lograr otra cosa que es bastante útil: evitar que los márgenes de los elementos secundarios colapsen con los de sus padres (pero para eso sí necesita algo más). Lea más sobre esto. aquí http://nicolasgallagher.com/micro-clearfix-hack/ ).

.cf:after {
    content: " ";
    display: table;
    clear: float;
}

Uso 2 y 4 donde corresponda (es decir, cuando sé la altura del contenido o si el desbordamiento no hace daño). En cualquier otro lugar, voy con la solución 3. Por cierto, tu primera solución no tiene ventaja sobre 3 (que puedo detectar) porque ya no es más semántica, ya que usa el mismo elemento ficticio.

Por cierto, no me preocuparía que la cuarta solución fuera un hack. Los hacks en CSS solo serían perjudiciales si su comportamiento subyacente está sujeto a reinterpretación u otro cambio. De esta manera, tu hack no estaría garantizado para funcionar. Sin embargo, en este caso, su pirateo se basa en el comportamiento exacto que debe tener el overflow: auto . No hay daño en enganchar un viaje gratis.






clearfix