Flotadores de CSS explicados en cinco preguntas

Los «flotantes» (elementos flotantes) de CSS son fáciles de usar, pero una vez que se usan, el efecto que tiene en los elementos que lo rodean a veces se vuelve impredecible. Si alguna vez te has encontrado con los problemas de la desaparición de elementos cercanos o flotadores que sobresalen como un pulgar dolorido, no te preocupes más.

Esta publicación cubre cinco preguntas básicas que lo ayudarán a convertirse en un experto en elementos flotantes.

¿Qué elementos no flotan?
¿Qué le sucede a un elemento cuando flota?
¿Qué pasa con los hermanos de «Floats»?
¿Qué le sucede a un padre de un «Flotador»?
¿Cómo se borran los «flotadores»?

Para los lectores que adoptan el enfoque TL; dr de la vida, hay un resumen cerca del final de la publicación.

1. ¿Qué elementos no flotan?

Un absoluto o elemento posicionado fijo no flotará. Entonces, la próxima vez que encuentre un flotador que no funciona, verifique si está en position:absolute o position:fixed y aplicar los cambios en consecuencia.

2. ¿Qué le sucede a un elemento cuando flota?

Cuando un elemento se etiqueta como «flotante», corre hacia la izquierda o hacia la derecha básicamente hasta que golpea la pared de su elemento contenedor. Alternativamente, se ejecutará hasta que golpea otro elemento flotante que ya ha golpeado la misma pared. Seguirán apilándose uno al lado del otro hasta que se agote el espacio, y los nuevos entrantes se moverán hacia abajo.

Elementos flotantes también no irá por encima de los elementos antes él en el código, algo que debe considerar antes de codificar un «Flotante» después un elemento al lado del cual desea hacerlo flotar.

Aquí hay dos cosas más que le suceden a un elemento flotante según el tipo de elemento que se mantiene flotando:

Un elemento en línea se convertirá en un elemento a nivel de bloque cuando flote

¿Alguna vez te has preguntado por qué de repente puedes asignar alto y ancho a un elemento flotante? span? Eso es porque todos los elementos cuando flotan obtendrán el valor block por su display atributo (inline-table obtendrá table) convirtiéndolos en elementos a nivel de bloque.

Un elemento de bloque de ancho no especificado se encogerá para ajustarse a su contenido cuando flote

Por lo general, cuando no especifica el ancho de un elemento de bloque, su ancho es el 100% predeterminado. Pero cuando flota, ese ya no es el caso; el cuadro del elemento de bloque se reducirá hasta que su contenido permanezca visible.

3. ¿Qué pasa con Los hermanos de «Floats»?

Cuando decida hacer flotar un elemento entre un montón de elementos, no se preocupe por cómo se comportará, su comportamiento será predecible y se moverá hacia la izquierda o hacia la derecha. Lo que realmente deberías estar pensando es cómo se van a comportar los hermanos después.

Los «flotadores» tienen los hermanos posteriores más cariñosos y obedientes del mundo. Harán todo lo que esté a su alcance para acomodar un elemento flotante.

El texto y elementos en línea simplemente dará paso a los «Floats» y rodeará al «Float» cuando está en posición.

El elementos de bloque irá un paso más allá y envolverse alrededor de un «flotador» generosamente, incluso si eso significa expulsar a sus propios elementos secundarios para hacer espacio para el «Flotador».

Vamos a comprobar esto en un experimento. Debajo hay un cuadro azul y después hay un cuadro rojo del mismo tamaño con algunos elementos secundarios.

Ahora, hagamos flotar la caja azul y veamos qué sucede con la caja roja y sus hijos.

Todo estará bien una vez que el cuadro rojo deje de abrazar al cuadro azul y para eso puedes usar overflow:hidden.

cuando agregas overflow:hidden a un elemento que ha estado envolviendo un flotador, dejará de hacerlo. Vea a continuación cómo se comporta el cuadro rojo con overflow:hidden.

4. ¿Qué le sucede a un padre de un «Flotador»?

Los padres no se preocupan mucho por sus hijos «flotantes», excepto que no deben salirse de sus límites izquierdo o derecho.

Por lo general, un elemento de bloque de altura no especificada aumenta su altura para acomodar sus elementos secundarios, pero ese no es el caso de los elementos secundarios «Flotantes». Si el tamaño de un «flotador» aumenta, su padre no aumentará su altura en consecuencia. Esto nuevamente se puede resolver usando overflow:hidden en el padre.

5. ¿Cómo borrar «Flotadores»?

Ya he mencionado usar overflow:hidden para hacer que un padre se adapte a la altura de un niño flotante mientras crea el espacio adecuado para otros elementos después del «Flotante» y para evitar que los hermanos envuelvan «Flotantes».

Y así es como haces que un elemento viva cerca de un «Flot» sin compromisos.

Hay otro método en el que los elementos ni siquiera estarán cerca de sus hermanos «Flotantes». Al usar el clear atributo puede hacer que un elemento esté libre de estar cerca de un «Flotante».

clear: left; 
clear: right;
clear: both;

left El valor borra todos los «flotantes» a la izquierda del elemento, y viceversa para righty en ambos lados para both. Este clear El atributo se puede usar en un elemento hermano, div vacío o en un pseudo elemento según su conveniencia.

Resumen

Los elementos absolutos/fijos no flotarán.
Un «Flotante» no pasa por encima del elemento. antes en el código.
Si no hay suficiente espacio en el contenedor, se empujará hacia abajo un «flotador».
Todos los «flotadores» se convierten en elementos a nivel de bloque.
Si no se especifica el ancho en un «Flotante», se reducirá para ajustarse al contenido.
Los hermanos posteriores de un «Flotante» los rodearán (en línea y texto) o los envolverán (bloques).
Para evitar que un elemento envuelva un «Flotante», use overflow:hidden.
Los padres de un «Flotador» no aumentarían su altura para adaptarse al flotador.
Para hacer que un padre aumente su altura según el «Flotante», use overflow:hidden (o crear un hermano vacío con clear después de).
Para evitar que un elemento esté cerca de cualquier «Flotante», use el clear atributo.