Cómo usar las propiedades «FLOAT» para diseñar diseños de páginas web en CSS

Cómo usar las propiedades “FLOAT” para diseñar diseños de páginas web en CSS

Cómo usar las propiedades «FLOAT» para diseñar diseños de páginas web en CSS

VALORACIÓN DEL ARTÍCULO:
5/5


La propiedad CSS es una propiedad muy importante para el diseño. Le permite posicionar los diseños de su página web exactamente como usted desea que se muestren – pero para poder usarla, usted tiene que entender cómo funciona.

En una hoja de estilo, la propiedad float de CSS tiene el siguiente aspecto:

.right { float: right; } 

>

Esto le indica al navegador que todo lo que tenga la clase «right» debe flotar a la derecha.

La asignarías así:

 /> 

¿Qué puede flotar con la propiedad CSS Float?

No se puede flotar cada elemento en una página web. Sólo se pueden flotar elementos de nivel de bloque. Estos son los elementos que ocupan un bloque de espacio en la página, como imágenes, párrafos, divisiones y listas.

Otros elementos que afectan al texto, pero que no crean un cuadro en la página se denominan elementos en línea y no pueden flotar. Estos son elementos como el span, los saltos de línea, el énfasis fuerte o las cursivas.

¿Dónde flotan?

Puede hacer flotar elementos a la derecha o a la izquierda. Cualquier elemento que siga al elemento flotado fluirá alrededor del elemento flotado en el otro lado.

Por ejemplo, si hace flotar una imagen a la izquierda, cualquier texto u otros elementos que la sigan fluirán alrededor de ella hacia la derecha. Y si haces flotar una imagen a la derecha, cualquier texto u otros elementos que la sigan fluirán alrededor de ella hacia la izquierda. Una imagen que se coloca en un bloque de texto sin ningún estilo de flotación aplicado a ella se mostrará, sin embargo, el navegador está configurado para mostrar imágenes. Esto es usualmente con la primera línea del texto siguiente que se muestra en la parte inferior de la imagen.

¿Hasta dónde flotarán?

Un elemento que se ha flotado se moverá tan a la izquierda o a la derecha del elemento de contenedor como pueda. Esto resulta en varias situaciones diferentes dependiendo de cómo se escriba su código. Para estos ejemplos, usted estará flotando un pequeño

DIV elemento a la izquierda:

  • Si el elemento flotado no tiene un ancho predefinido, ocupará tanto espacio horizontal como sea necesario y disponible, independientemente de la holgura.

Nota

Algunos navegadores intentan colocar elementos junto a elementos flotantes cuando el ancho no está definido – normalmente dando al elemento no flotante sólo una pequeña cantidad de espacio. Así que debería definir siempre un ancho en elementos flotantes.

  • Si el elemento contenedor es el elemento HTML, el
    DIV

    flotará en el margen izquierdo de la página.

  • Si el propio elemento del contenedor está contenido por otra cosa, el
    DIV

    flotará en el margen izquierdo del contenedor.

  • Puede anidar elementos flotantes, y eso puede dar lugar a que el flotador acabe en un lugar sorprendente. Por ejemplo, este flotador es un flotador izquierdo flotado
    DIV

    dentro de un flotador derecho

    DIV

    .

  • Los elementos flotantes se sentarán uno al lado del otro si hay espacio en el contenedor. Por ejemplo, este contenedor tiene tres elementos de 100px de ancho
    DIV

    flotados en un contenedor de 400px de ancho.

Incluso puede utilizar flotadores para crear un diseño de galería de fotos. Usted pone cada miniatura (funciona mejor cuando todas son del mismo tamaño) en un

DIV con el título y el flotador, los elementos

DIV

en el contenedor. No importa cuán amplia sea la ventana del navegador, las miniaturas se alinearán uniformemente.

Desactivar el flotador

Una vez que se sabe cómo conseguir que un elemento flote, es importante saber cómo desactivar el flotador. Desactivar el flotador con la propiedad CSS clear. Puede despejar flotadores izquierdos, flotadores derechos o ambos:

clear: left;
claro: derecha;
claro: ambos;

Cualquier elemento para el que establezca la propiedad clear aparecerá debajo de un elemento que esté flotando en esa dirección.

Juegue con el valor claro de los diferentes elementos de sus documentos para obtener diferentes efectos de diseño. Uno de los diseños flotantes más interesantes es una serie de imágenes en la columna derecha o izquierda junto a los párrafos del texto. Incluso si el texto no es lo suficientemente largo como para desplazarse más allá de la imagen, puede utilizar el clear en todas las imágenes para asegurarse de que aparecen en la columna en lugar de al lado de la imagen anterior.

El HTML (repita este párrafo):

Duis aute irure dolor sed do eiusmod tempor incididunt in reprehenderit in voluptate. Cupidatat non proident, ut labore et dolore magna aliqua.

El CSS (para hacer flotar las imágenes a la izquierda):

img.float { float:left;
claro:izquierda;
margen:5px;
} > } } } } } } } } } } } } }

Y a la derecha:

img.float { float:right;
clear:derecha;
margen:5px;
} > } } } } } } } } } } } } }

Uso de flotadores para el diseño

Una vez que entienda cómo

float funciona, puede empezar a utilizarla para diseñar sus páginas web. Estos son los pasos que doy para crear una página web flotante:

  • Diseñar el diseño (en papel o en una herramienta gráfica o en mi cabeza).
  • Determine dónde van a estar las divisiones de página.
  • Determine los anchos de los distintos contenedores y los elementos que los componen.
  • Flotar todo. Incluso el elemento más exterior del contenedor flota a la izquierda, de modo que sé dónde estará en relación con la ventana de visualización del navegador.

Siempre que conozca los anchos (los porcentajes son correctos) de sus secciones de maquetación, puede utilizar el comando

float para ponerlos en el lugar que les corresponde en la página. Y lo bueno es que no tienes que preocuparte tanto de que el modelo de la caja sea diferente para Internet Explorer o Firefox.

TAMBIÉN TE INTERESA

equipo-e-Sports

Cómo se entrenan los jugadores profesionales de e-Sports

Siempre se habla de los e-Sports desde el punto de vista de los juegos, premios y competiciones que se suceden en el mundo. Sin embargo, poco se habla de la preparación que siguen los profesionales de esta industria que tanto ha crecido en los últimos años. A lo largo de este post, una escuela online

estafada-en-una-app

Así te pueden estafar en Vinted: la explicación paso a paso

Vinted es una de las plataformas de mayor éxito en el último año. Con la subida de precios, muchos han apostado por la fórmula de la segunda mano para comprar artículos. Y como la moda es uno de los sectores más dinámicos para el consumo… blanco y en botella. Vinted tiene actualmente uno seis millones

simplr

El consumo de productos de tecnología está cambiando gracias a plataformas como Simplr

Simplr y otras plataformas parecidas están impulsado un cambio de consumo en los productos tecnológicos. La clave de estas webs es que los productos se “alquilan” bajo un pago por uso o suscripción. Mediante esta fórmula, estas compañías aseguran que los usuarios pueden ahorrarse mucho dinero, aunque también hay otras perspectivas destacables. El pago por

redactor de contenido

¿Corre peligro un redactor de contenido con la inteligencia artificial?

Un redactor de contenido es un tipo de profesional que ha existido siempre. Desde la llegada de los medios de comunicación clásicos hasta la consolidación de las plataformas digitales de ocio e información con la llegada de streamers, el puesto también llamado de content editor ha sido relevante se mire por donde se mire. Esa