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í:

 /> 

Índice de contenidos

¿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

smartwatch para niños

Si no quieres darle un teléfono a tu hijo, opta por el reloj Xplora XGO3

Muchos colegios de España se encuentran en pleno debate sobre el uso del smartphone en los niños. Diferentes asociaciones y padres trabajan en colaboración para atrasar la edad en la que los hijos reciben su primer teléfono inteligente. En el horizonte están los peligros que esconde facilitar esta tecnología a menores, traducidos en casos de

técnicas de ingeniería social

Ataques de ingeniería social: los ciberataques más ‘humanos’

Dentro del mundo de la ciberseguridad, existen unas amenazas que son del todo parecidas a los robos tradicionales: los ataques de ingeniería social. A menudo informamos de la sofisticación de los hackers a la hora de crear código malicioso o desarrollar puertas de entrada falsas o clones de páginas, pero se olvida que gran parte

IA para alquiler vacacional

MAIA: una IA para gestionar viviendas de alquiler vacacional

La IA está inundando cada actividad que pueda requerir automatización. Para la gestión de propiedades, llega MAIA una tecnología inteligente presentada por el operador RentalReady para agilizar el sector del alquiler vacacional. No es un programa destinado a usuarios finales, sino al mercado B2B, sin embargo la noticia alrededor de esta presentación es que la

fábrica de Mercedes-Benz en Vitoria

Así está aplicando Mercedes-Benz la computación cuántica…

La computación cuántica es tan disruptiva que permite poner el nombre de clásica a la inteligencia artificial. Es el futuro y, seguramente, todas las industrias harán uso de la misma cuando se democratice. Para eso quedan unos años, pero los inicios ya se están dejando sentir en algunas actividades y compañías. En concreto, la automoción