html - que - posicion fija css

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

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Qué métodos de ''clearfix'' puedo usar? 28 respuestas

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?

Answer 1

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.

Answer 2

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.

Answer 3

Creo que la mejor manera es dejar en clear:both para el elemento próximo.

Este es el por qué:

1) :after selector no es compatible con IE6 / 7 y el buggy en FF3, sin embargo,
Si solo te interesa IE8 + y FF3.5 + borrar con: after es probablemente lo mejor para ti ...

2) se supone que el overflow debe hacer otra cosa, por lo que este truco no es lo suficientemente confiable.

Nota para el autor: no hay nada de hacky en la limpieza ... Borrar significa omitir los campos flotantes. CLEAR está con nosotros desde HTML3 (quién sabe, quizás incluso más) http://www.w3.org/MarkUp/html3/deflists.html , tal vez deberían elegir un nombre un poco diferente como la página: nuevo, pero eso es solo un detalle ...

Answer 4

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.

Answer 5

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

Answer 6

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

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

div {
  overflow:hidden;
}

Entonces nunca tengo que preocuparme por eso.

Answer 7

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.

Answer 8

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;
}

Answer 9

La solución ideal sería utilizar inline-block en inline-block para las columnas en lugar de flotar. Creo que la compatibilidad con el navegador es bastante buena si sigue (a) aplicar inline-block solo a los elementos que normalmente están en línea (p. Ej., span ); y (b) agregar -moz-inline-box para Firefox.

También revise su página en FF2 porque tuve un montón de problemas al anidar ciertos elementos (sorprendentemente, este es el único caso en el que IE funciona mucho mejor que FF).

Answer 10

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;
}

Answer 11

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.

Answer 12

Otra solución posible que creo que es más correcta semánticamente es cambiar los elementos internos flotantes para que sean ''mostrar: en línea''. Este ejemplo y en lo que estaba trabajando cuando me topé con esta página usan divs flotantes de la misma manera que se usaría un tramo. En lugar de usar divs, cambie a span, o si está usando otro elemento que es por defecto ''display: block'' en lugar de ''display: inline'', entonces cámbielo a ''display: inline''. Creo que esta es la solución 100% semánticamente correcta.

La solución 1, flotando el elemento primario, consiste esencialmente en cambiar todo el documento a flotar.

La Solución 2, establecer una altura explícita, es como dibujar un cuadro y decir que quiero poner una imagen aquí, es decir, use esto si está haciendo una etiqueta img.

La solución 3, agregar un espaciador para eliminar el flotador, es como agregar una línea adicional debajo de su contenido y también afectará los elementos circundantes. Si utiliza este enfoque, probablemente desee configurar el div en altura: 0px.

La Solución 4, desbordamiento: automático, es reconocer que no sabe cómo colocar el documento y está admitiendo que no sabe qué hacer.

Answer 13

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;
}

Answer 14

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.

Answer 15

agrega esto en el div padre en la parte inferior

 <div style="clear:both"></div>

Answer 16

quizás este sencillo ejemplo útil: https://github.com/imammubin/Simple-Example-Slideshow-Responsive-Layout