Anunciese Aquí

Registro automático

Acceder con Twitter

top articulo
twitter
facebook
Rss
viernes 01 de marzo del 2024
Lea, publique artículos gratis, y comparta su conocimiento
Usuario Clave ¿Olvidó su clave?
¿Iniciar sesión automáticamente en cada visita?
Inserte su correo electronico

La Propiedad Float en CSS

veces visto 4688 Veces vista   comentario 0 Comentarios

En la definición de la estructura de una página web se utilizan elementos que, manejados adecuadamente, son las variables que nos permitirán dar una imagen profesional a nuestro sitio. Las tablas fueron uno de los medios usados para la maquetación web en sectores rectangulares, los cuales permitían ubicar los objetos en un orden más o menos controlado.

Sin embargo, el uso de tablas dentro del HTML fue reemplazado, a partir de la creación de una propiedad CSS que permite más flexibilidad y precisión: la propiedad float.

Desde entonces, las tablas se utilizan sólo para su función básica: la tabulación de cifras o datos.

Una vez que se conocen las características de la propiedad float en CSS, la diagramación de un sitio web y sus actualizaciones posteriores se realizan con mayor elasticidad y eficiencia.

La Función de Float

La propiedad float permite la distribución en columnas de los elementos de bloque de la página. Llamamos elementos de bloque a todos aquellos que generan un área rectangular en el sitio que ocupan rompiendo el flujo normal del texto, como div, p, ul.

La propiedad float en CSS permite desplazar un elemento de bloque a la izquierda o a la derecha. Esto produce un cambio en la progresión normal, por la cual los elementos se ubican según su orden secuencial en la página. Una de las características de la propiedad float es que los objetos que no configuran bloques, como el texto, rodean al objeto “flotante”. Esto es particularmente visible en las páginas que contienen ilustraciones en medio de un párrafo de texto, a modo de revista.

El formato de la función float es así:

.derecha {float: right;} o .izquierda {float: left;}

Donde los parámetros posibles son right, left, none o inherit.

right: el elemento es empujado (“flota”) hacia la derecha.

left: el elemento se desplaza hacia la izquierda.

none: el objeto seguirá la secuencia normal de la página.

inherit: la propiedad float de este elemento depende de un objeto padre (un elemento de nivel superior que lo contiene).

Relación de Float con Los Elementos

La propiedad float sólo se aplica a elementos que formen bloques o módulos. Estos son: imágenes, párrafos, divisiones y listas. O sea, los objetos que determinan una zona rectangular sobre la página. Tabién se puede aplicar la propiedad folat a un elemento de línea (a, span), al que se le ha dado display:block, que cambia su valor en línea a bloque.

Dentro de la codificación HTML se identifican de la siguiente manera:

Imágenes: <img src= …… [localización de archivo y parámetros]………………..>

Párrafos: <p> ….. [texto] ….. </p>

Divisiones: <div> ….. [parámetros] ….. </div>

Listas: <ul> ….. [elementos de la lista] ….. </ul>

Los elementos que no forman bloques, como el texto, por ejemplo, rodean al objeto flotante sobre el espacio opuesto a él. Es decir, si el objeto tiene la propiedad float: left, el texto lo rodeará ocupando todo el espacio posible a la derecha, sin invadir su posición. En cuanto a otros objetos de bloque, se ubicarán ignorando la posición del elemento flotante.

Los objetos con la propiedad float deben definirse además con la propiedad width (ancho) para asegurar las dimensiones de la columna y evitar conflictos de ubicación y espacio. Una de las propiedades que se utiliza en conjunto con float para mejorar la organización de los elementos, es clear. Clear se aplica a un objeto para evitar que se coloquen elementos flotantes a sus lados. Los parámetros de clear son left (no permite objetos a su izquierda), right (no los permite a la derecha) y both (impide elementos flotantes a ambos lados).

Aplicaciones Prácticas de Float

Queda más o menos clara la función de esta propiedad, en cuanto a fijar un bloque sobre uno de los lados y permitir el flujo de otra información a su alrededor. Con la práctica se pueden lograr efectos muy creativos mediante el uso de float, clear, la definición de anchos de columnas y la intervención de otros elementos, flotantes o no. En particular, los casos que se esbozan a continuación reflejan algunos de esos usos prácticos.

Menú horizontal: mediante la incorporación de varios rectángulos (imágenes) en forma secuencial y con propiedad float: left, dentro de una lista desordenada, <ul>, logramos su ubicación horizontal en línea. El primer rectángulo se ubicará sobre el margen izquierdo, el segundo sobre el primer objeto, y así hasta completar todos los rectángulos. Estas imágenes pueden llevar una leyenda y ser enlazadas con las páginas que correspondan, lo cual configura un menú horizontal.

Catálogo de productos: tal como en el caso anterior, la inclusión de fotografías de productos con sus descripciones dentro de una lista desordenada, permite su exhibición horizontal en una o varias líneas, si se utiliza la propiedad float para cada objeto. Es un método más eficiente que el uso de tablas, ya que el sencillo reemplazo de una de las imágenes reorganizaría el resto sin necesidad de ninguna tarea adicional.

Clasificación: 2.2 (24 votos)
Está prohibido copiar este artículo. Artículo.org no permite la sindicación de sus artículos.
Acerca del autor

Jhonatan Hoyos, Colombiano, profesion Ingeniero en Sistemas, actualmente trabajo en SEO/SEM. Soy Profesional en Posicionamiento Web -

¿Tiene comentarios o preguntas para el autor?
Artículos recomendados
Diseño Web para niños
Escrito por Zerep, Añadido: 01 de Mar, 2011
El diseño web para los niños es una experiencia fascinante, desafiante y gratificante, además de exasperante. Aquí se está tratando de crear una experiencia digital para personas que aún carecen de la capacidad cognitiva para entender la abstracción. En el diseño web para niños se tratando de establecer...
veces visto 2641 Veces vista:   comentarios 0 Comentarios
Pasos necesarios para ejecutar un programa en una computadora
Escrito por Carlos Pes, Añadido: 13 de Ene, 2011
Suponiendo que en el disco duro de un PC esté guardado un programa que sirva para realizar la suma de dos números enteros cualesquiera (por ejemplo, del 3 y el 5), si alguien quiere realizar una suma con dicho programa, deberá seguir, como mínimo, los siguientes cinco pasos: 1. Encender el ordenador....
veces visto 5901 Veces vista:   comentarios 0 Comentarios
Protesta de GOOGLE por acuerdo de APPLE con los programadores
Escrito por Leonel Morales, Añadido: 24 de Jun, 2010
Google dijo el miércoles 09/junio/2010 que los recientes cambios en el acuerdo entre su rival Apple y los desarrolladores de aplicaciones bloquearán las herramientas de publicidad de Google para el popular iPhone, creando barreras "artificiales" para la competencia Apple modificó la redacción del...
veces visto 1600 Veces vista:   comentarios 0 Comentarios
Introducción a PHP
Escrito por Hugo Gómez, Añadido: 22 de Abr, 2010
¿Qué es PHP? PHP significa “PHP: Hypertext Preprocessor”. PHP es un lenguaje de script del lado del servidor para crear páginas Web dinámicas. Crear scripts PHP para realizar un seguimiento de las actividades de los visitantes en el sitio, enviar correos electrónicos a los clientes, que los usuarios...
veces visto 3328 Veces vista:   comentarios 0 Comentarios
Pasos fundamentales para comenzar a programar
Escrito por Javi Pizarro , Añadido: 17 de Mar, 2011
Te voy a mostrar el error más común que comenten el 90% de las personas que deciden aprender a programar. Si tú eres capaz de evitar este error y enfocar tus energías a lo que te voy a proponer, vas a ser capaz de dar tus primeros pasos para programar y de ponerte en acción sin dudarlo y sin...
veces visto 2853 Veces vista:   comentarios 0 Comentarios