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.
