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

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en telegram
Compartir en whatsapp
Compartir en email
Compartir en print
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.

Deja un comentario

TAMBIÉN TE INTERESA

avatares-para-los-clientes-de-un-supermercado

Las tiendas y las calles se podrían llenar de avatares inteligentes…

Empieza a sonar con fuerza el metaverso en numerosas industrias. El futuro de internet consistirá a base de plataformas o salas para interactuar, pero en lugar de nosotros serán los avatares que hayamos diseñado los que se desenvuelvan por este nuevo espacio virtual que dará un paso más con respecto a las redes sociales.  

anillo-Circular

Menos la hora, el anillo Circular ofrece todo lo que un buen smartwatch

El anillo Circular se suma a la tendencia imparable de los wearables en el mundo de la tecnología y la electrónica de consumo. Todo lo que ofrece, exceptuando la hora, puede asemejarse a las funciones de un buen smartwatch como el de Apple o cualquier otra pulsara de conocidas marcas del segmento.   Índice de

OnePlus-10-Pro

Un nuevo pura sangre de Android llegará en primavera: OnePlus 10 Pro

Apenas estamos saboreando al OnePlus 9 Pro y la marca anuncia su nuevo flagship: el OnePlus 10 Pro. Será el smartphone referente de una marca que poco a poco se está haciendo un hueco importante en el mercado europeo tras triunfar en China. Será en su país de origen donde se lance el dispositivo y

movil-plegable-honor-magic-v

Nuevo móvil plegable en el mercado: Honor Magic V

Si eres fan del móvil plegable, has de saber que el de Samsung no es el único que puede ocupar tu mente. El Honor Magic V acaba de salir del horno y promete hacerle mucha competencia a su rival surcoreano.   El Honor Magic V se presenta como el primer móvil plegable de la firma

hacker

Destapadas las cifras de fraude en el pasado Black Friday: ojo a España

Pasadas ya unas cuantas semanas del Black Friday, podemos sacar conclusiones sobre el fraude o los intentos de fraude que se han producido a nivel global y en España. Los datos que han salido a la luz sitúan a España como una gran diana por los hackers, ya que nuestro país supera ampliamente la media

OPPO-Air-Glass

Las OPPO Air Glass esperan ver la luz en el primer trimestre del año

Las OPPO Air Glass son las primeras gafas de realidad asistida de la marcha china que fueron presentadas durante la última parte del año 2021, en su llamado INNO Day. Su llegada definitiva al mercado se estima para esta primera parte del año 2022, aunque por el momento su comercialización solo se producirá en territorio