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.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo