Flotadores CSS explicados en 5 preguntas

Los "flotadores" de CSS (elementos flotantes) son fáciles de usar, pero una vez que se usan, el efecto que tiene en los elementos a su alrededor a veces se vuelve impredecible. Si alguna vez se ha encontrado con los problemas de la desaparición de elementos cercanos o flotadores que sobresalen como un pulgar adolorido, no se preocupe más..

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

1. ¿Qué elementos no flotan??
2. ¿Qué le sucede a un elemento cuando flota??
3. ¿Qué pasa con los hermanos de "Flotadores"??
4. ¿Qué le sucede a un padre de un "Flotador"??
5. ¿Cómo se borra "Flotadores"?

Para los lectores que añaden el enfoque de TL a 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á Así que la próxima vez que encuentre un flotador que no esté funcionando, verifique si está en posición: absoluta o posición: fijo y aplicar los cambios en consecuencia.

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

Cuando un elemento está etiquetado como "float", se ejecuta a la izquierda o 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. Se seguirán acumulando lado a lado hasta que el espacio se agote, y los nuevos entrantes se moverán hacia abajo.

Elementos flotantes también. no irá por encima de los elementos antes de eso en el código, algo que debe considerar antes de codificar un “Flotador” después Un elemento al lado del cual quieres flotarlo..

Aquí hay dos cosas más que le suceden a un elemento flotante dependiendo de qué tipo de elemento se mantiene flotando:

(1) Un elemento en línea se convertirá en un elemento a nivel de bloque. cuando flota.

¿Alguna vez te has preguntado por qué de repente eres capaz de asignar altura y anchura a un flotador? lapso? Eso es porque todos los elementos cuando flotan obtendrán el valor bloquear por su monitor atributomesa en linea obtendrá mesa) Haciéndolos elementos de nivel de bloque..

(2) Un elemento de bloque de ancho no especificado se reducirá para ajustarse a su contenido cuando esté flotando.

Normalmente, cuando no especifica el ancho de un elemento de bloque, su ancho es el 100% predeterminado. Pero cuando flota, ya no es así; la caja del elemento de bloque se reducirá hasta que su contenido permanezca visible.

3. ¿Qué pasa con los hermanos de "Flotadores"??

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

Los "flotadores" tienen los hermanos posteriores más cariñosos y obedientes en todo el mundo. Harán todo lo posible para acomodar un elemento flotante..

los texto y elementos en línea será simplemente dar paso a los "flotadores" y rodeará el "flotador" cuando está en posición.

los elementos de bloque irá un paso más allá y lo hará se envuelven alrededor de un "flotador" generosamente, incluso si eso significa expulsar a sus propios elementos secundarios para hacer espacio para el "Flotador".

Vamos a ver esto en un experimento. Abajo hay una caja azul y luego una caja roja del mismo tamaño con algunos elementos secundarios.

Ahora, flotemos el cuadro azul y veamos qué sucede con el cuadro rojo y sus hijos..

Todo estará bien una vez que el cuadro rojo deje de abrazar el cuadro azul y para eso puede usar desbordamiento: oculto.

Cuando añades desbordamiento: oculto a un elemento que ha estado envolviendo un flotador, dejará de hacerlo. Vea a continuación cómo se comporta el cuadro rojo con desbordamiento: oculto.

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

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

Normalmente, un elemento de bloque de altura no especificada aumenta su altura para adaptarse a sus elementos secundarios, pero ese no es el caso de los niños "flotantes". Si aumenta el tamaño de un "Flotador", su padre no aumentará su altura en consecuencia. Esto de nuevo se puede resolver usando desbordamiento: oculto en el padre.

5. Cómo borrar "Flotadores"?

Ya he mencionado usando desbordamiento: oculto para hacer que un padre, en cuanto a la altura, acomode a un niño flotante mientras crea el espacio adecuado para otros elementos después del "Flotador" y para evitar que los hermanos se envuelvan..

Y así es como haces que un elemento viva cerca de un "Flotador" sin compromisos..

Hay otro método en el que los elementos ni siquiera estarán cerca de sus hermanos "Float". Utilizando el claro atributo puedes hacer que un elemento esté libre de estar cerca de un "Flotante".

claro: izquierda; claro: a la derecha; Limpia los dos; 

izquierda el valor borra todos los "Flotantes" a la izquierda del elemento y viceversa para Correcto, y en ambos lados para ambos. Esta claro atributo se puede utilizar en un hermano, div vacío o en pseudo elemento según su conveniente.

Resumen

1. Los elementos absolutos / fijos no flotarán.
2. Un "flotador" no pasa por encima del elemento antes de en el codigo.
3. Si no hay suficiente espacio en el contenedor, se empujará hacia abajo un "Flotador".
4. Todos los "flotadores" se hacen en elementos a nivel de bloque.
5. Si el ancho no se especifica en un "Flotante", se reducirá para ajustarse al contenido.
6. Los hermanos posteriores de un "Flotante" los rodearán (en línea y texto) o los envolverán (bloques).
7. Para evitar que un elemento envuelva un "Flotante", use desbordamiento: oculto.
8. Los padres de un "flotador" no aumentarían su altura para adaptarse al flotador.
9. Para hacer que un padre aumente su altura según el "Flotador", use desbordamiento: oculto (o crear un hermano vacío con claro después de)
10. Para evitar que un elemento esté cerca de cualquier "Flotador", use la claro atributo.