Pregunta ¿Cómo se evita que los padres de los elementos flotados se colapsen? [duplicar]


Esta pregunta ya tiene una respuesta aquí:

Aunque elementos como <div>s normalmente crecen para ajustarse a sus contenidos, utilizando float propiedad puede causar un problema sorprendente para principiantes de CSS: si los elementos flotados tienen elementos principales no flotantes, el padre se colapsará.

Por ejemplo:

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

El padre div en este ejemplo se no expandir para contener a sus hijos flotados - parecerá tener height: 0.

¿Cómo resuelves este problema?

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

Solución 1

Flota al 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 desee que el padre flote. Incluso si lo haces, ¿flotas a los padres de los padres, y así sucesivamente? ¿Debe flotar cada elemento ancestro?

Solución 2

Dale al padre 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 el tamaño del navegador cambia, el diseño se romperá.

Solución 3

Agregue un elemento "espaciador" dentro del elemento principal, 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: Directo al código.
Contras: No semántico; el spacer div existe solo como un hack de diseño.

Solución 4

Establecer padre a 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 adicional
Contras: Parece un truco, ese no es el overflow propósito declarado de la propiedad.

¿Comentarios? ¿Otras sugerencias?


877


origen


Respuestas:


Solución 1:

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

Manifestació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 padre DIV.

Esta solución es retrocompatible con IE8, por lo que no debe preocuparse por la falla de los navegadores más antiguos.

Solución 2:

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

Manifestació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 IE5.5 pero no se ha probado.

Solución 3:

También es posible establecer display: inline-block; y width: 100%; para emular un elemento de bloque normal sin colapsar.

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

CSS:

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

Esta solución debe ser compatible con IE5.5 pero solo ha sido probada en IE6.


482



Usualmente uso el overflow: auto truco; aunque, estrictamente hablando, no es el uso previsto para el desbordamiento, es es un poco relacionado, lo suficiente para que sea fácil de recordar, sin duda. El significado de float: left se ha extendido para varios usos más significativamente que el desbordamiento en este ejemplo, IMO.


66



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

  • { clear: both; }
  • clearfix

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

.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 :)


18



En lugar de poner overflow:auto en el padre, poner overflow:hidden

El primer CSS que escribo para cualquier página web siempre es:

div {
  overflow:hidden;
}

Entonces nunca tengo que preocuparme por eso.


17



Hay varias versiones del clearfix, con Nicolas Gallagher y Thierry Koblentz como autores clave.

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

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

En SCSS, debes usar 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;
}

12



Aunque el código no es perfectamente semántico, creo que es más sencillo tener lo que llamo un "div 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 una línea de 0px de altura y altura también.


9



La solución ideal sería usar inline-block para las columnas en lugar de flotar. Creo que el soporte del navegador es bastante bueno si sigues (a) aplicas inline-block solo a elementos que normalmente están en línea (p. ej. span); y (b) agregar -moz-inline-box para Firefox.

Comprueba también tu página en FF2 porque tuve muchos problemas al anidar ciertos elementos (sorprendentemente, este es el único caso en el que IE funciona mucho mejor que FF).


9



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

Solución uno: Limpia los dos

Agregar un elemento de bloque con el estilo claro: ambos; sobre ella se borrarán las carrozas más allá de ese punto y se detendrá el colapso del elemento primario de ese elemento. 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 anteriores y css válidos.

Contras: Requiere la otra etiqueta para borrar los flotadores, marcado de hinchazón.

Nota: Para recurrir a IE6 y para que funcione en padres abstinentes (es decir, el elemento de entrada) no puede usar: después.

Solución dos: pantalla: mesa

Agregar visualización: tabla; al padre para que se encoja de los flotadores y se muestre con la altura correcta. http://jsfiddle.net/h9GAZ/1/

Pros: Sin marcado adicional y es mucho más ordenado. Funciona en IE6 +

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

Nota: El ancho de IE6 y 7 automático se usa para evitar que el ancho sea del 100% + relleno, que no es el caso en los navegadores más nuevos.

Una nota sobre las otras "soluciones"

Estas correcciones funcionan con el explorador compatible más bajo, más del 1% de uso global (IE6), lo que significa usar: after no lo corta.

El desbordamiento oculto muestra el contenido pero no evita que el elemento colapse y, por lo tanto, no responde la pregunta. Usar un bloque en línea puede tener resultados erróneos, los niños tienen márgenes extraños y mucho más, la mesa es mucho mejor.

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

Css inválido

El CSS no válido nunca le hizo daño a nadie, de hecho, ahora es la norma. Usar los prefijos del navegador es tan inválido como usar hacks específicos del navegador y no afecta al usuario final de ninguna manera.

En conclusión

Utilizo las dos soluciones anteriores para hacer que los elementos reaccionen correctamente y jueguen bien entre ellos. Te imploro que hagas lo mismo.


9



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

Por cierto, no me preocuparía que la cuarta solución sea un truco. Los hacks en CSS solo serían perjudiciales si su comportamiento subyacente está sujeto a una reinterpretación u otro cambio. De esta forma, su truco no estaría garantizado para funcionar. Sin embargo, en este caso, su truco depende del comportamiento exacto que overflow: auto está destinado a tener. No hay daño en enganchar un paseo gratis.


6



Mi método favorito es usar una clase 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;
}

5