La propiedad CSS es una propiedad muy importante para el diseño. Le permite ubicar los diseños de sus páginas web exactamente como desea que se muestren, pero para poder usarlo, debe comprender cómo funciona.
En una hoja de estilo, la propiedad float CSS se ve así:
.right {float: right; }
Esto le dice al navegador que todo con la clase de "derecho" debe flotar a la derecha.
Lo asignarías así:
class = "right" />
¿Qué puedes flotar con la propiedad del flotador CSS?
No puedes flotar cada elemento en una página web. Solo puedes flotar elementos a 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 el 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 span (), saltos de línea (), énfasis fuerte () o cursiva ().
¿Dónde flotan?
Puedes flotar elementos hacia la derecha o hacia la izquierda. Cualquier elemento que siga al elemento flotado fluirá alrededor del elemento flotado en el otro lado.
Por ejemplo, si floto una imagen a la izquierda, cualquier texto u otro elemento que la siga fluirá a la derecha. Y si hago flotar una imagen a la derecha, cualquier texto u otro elemento que la siga fluirá a su izquierda. Se mostrará una imagen que se coloca en un bloque de texto sin ningún estilo flotante, sin embargo, el navegador está configurado para mostrar imágenes. Esto suele ser con la primera línea del siguiente texto que se muestra en la parte inferior de la imagen.
¿Qué tan lejos van a flotar?
Un elemento que haya flotado se moverá tan lejos como sea posible hacia la izquierda o la derecha del elemento contenedor. Esto resulta en varias situaciones diferentes dependiendo de cómo se escribe su código. Para estos ejemplos, estaré flotando un pequeño Div elemento a la izquierda:
- Si el elemento flotante no tiene un ancho predefinido, ocupará tanto espacio horizontal como sea necesario y esté disponible, independientemente del flotador. Nota: algunos navegadores intentan colocar elementos junto a elementos flotantes cuando no se define el ancho, lo que suele otorgar al elemento no flotado solo una pequeña cantidad de espacio. Así que deberías siempre define un ancho sobre elementos flotados.
- Si el elemento contenedor es el elemento HTML, el elemento flotante
DivSe sentará en el margen izquierdo de la página. - Si el elemento contenedor está contenido por otra cosa, el flotante
DivSe sentará en el margen izquierdo del contenedor. - Puede anidar elementos flotados, y eso puede hacer que el flotador termine en un lugar sorprendente. Por ejemplo, este flotador es un flotante izquierdo.
Divdentro de un derecho flotabaDiv. - Los elementos flotados se sentarán uno junto al otro si hay espacio en el contenedor. Por ejemplo, este contenedor tiene tres anchos de 100px.
DivElementos flotaron en un contenedor de 400px de ancho.
Incluso puedes usar flotadores para crear un diseño de galería de fotos. Usted coloca cada miniatura (funciona mejor cuando todas tienen el mismo tamaño) en una Div con el título y el flotador Div Elementos en el contenedor. No importa qué tan ancha sea la ventana del navegador, las miniaturas se alinearán uniformemente.
Apagar el flotador
Una vez que sepa cómo hacer que un elemento flote, es importante saber cómo apagar el flotador. Desactivas el flotante con la propiedad CSS clear. Puede borrar flotadores a la izquierda, flotadores a la derecha o ambos:
claro: izquierda;claro: a la derecha;Limpia los dos;
Cualquier elemento para el que establezca la propiedad de borrado aparecerá debajo de un elemento que flote en esa dirección. Por ejemplo, en este ejemplo, los dos primeros párrafos del texto no se borran, pero el tercero sí lo está.
Juega con el claro valor de diferentes elementos en tus 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 de texto. Incluso si el texto no es lo suficientemente largo como para desplazarse más allá de la imagen, puede usar el borrado de todas las imágenes para asegurarse de que aparezcan en la columna en lugar de junto a la imagen anterior.
El HTML (repita este párrafo):
Esto es, sin duda alguna, en caso de violencia temporal. Cupidatat no 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: derecha; claro: a la derecha; margen: 5px;}
Usando flotadores para el diseño
Una vez que entiendas como flotador Si la propiedad funciona, puede comenzar a usarla para diseñar sus páginas web. Estos son los pasos que tomo 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 la página.
- Determine los anchos de los diversos contenedores y los elementos dentro de ellos.
- Flota todo. Incluso el elemento contenedor más externo está flotando hacia la izquierda para que sepa dónde estará en relación con el puerto de vista del navegador.
Siempre que sepa los anchos (los porcentajes están bien) de sus secciones de diseño, puede usar el flotador Propiedad para ponerlos donde pertenecen en la página. Y lo bueno es que no tiene que preocuparse tanto por el hecho de que el modelo de caja sea diferente para Internet Explorer o Firefox.
