Codificación aprenderaprogramar.com: CU01034D
POSICIONAMIENTO FLOTANTE
Aunque ya conocemos la propiedad position, que nos permite organizar la posición de elementos dentro de una página web, esta propiedad no es lo suficientemente flexible como para lograr diseños atractivos y que se visualicen correctamente en todo tipo de dispositivos. Vamos a estudiar el denominado “posicionamiento flotante”, que amplía las posibilidades para organizar los elementos en la web.
El posicionamiento flotante puede resultar un poco desconcertante o confuso cuando se empieza a trabajar con él. Comprender su funcionamiento y posibilidades requiere tiempo y bastantes horas de estudio y ejercicio. Hay que tener paciencia y practicar para llegar a comprenderlo. Sin embargo, a medida que se conoce y se adquiere experiencia resultará fácil trabajar con él y se comprenderán las ventajas que supone, de ahí que sea la forma de posicionamiento más utilizado.
Lo primero que trataremos de abordar es la definición de “flotar”. El concepto de posicionamiento flotante se creó inicialmente para lograr que el texto se situara alrededor de las imágenes y no necesariamente debajo de ellas.
Crea un archivo HTML con este contenido:
|
<html> |
Y un archivo de hoja de estilos (nosotros estamos usando el nombre de archivo estilosCU01034DA.css) con este código que nos permite ver el borde de la caja contenedora:
|
/* Curso CSS estilos aprenderaprogramar.com*/ |
Se llama “flotar” un elemento a establecer un comportamiento especial para él definiendo un valor para la propiedad CSS float.
La sintaxis a emplear es del tipo:
| selectorElemento {float: valorFloat; } |
La propiedad float sólo admite 3 valores: none (el elemento no flota), right y left.
El valor none significa que el elemento se comportará de la forma habitual dentro del flujo del documento HTML, y es el valor por defecto. Un elemento con float: none; decimos que no es flotante.
El valor right hará que el elemento se desplace hacia la derecha. Se desplazará dentro de su línea de posición y dentro de su contenedor tanto como sea posible, y que los elementos que vienen a continuación se situarán envolviéndolo (en este caso lo rodearán por la izquierda, ya que el elemento estará completamente a la derecha). Los elementos anteriores no cambian su comportamiento.
El valor left hará que el elemento se desplace hacia la izquierda. Se desplazará dentro de su línea de posición y dentro de su contenedor tanto como sea posible y que los elementos que vienen a continuación se situarán rodeándolo (en este caso lo rodearán por la derecha, ya que el elemento estará completamente a la izquierda). Los elementos anteriores no cambian su comportamiento.
La propiedad float no se puede usar para centrar elementos en una página web. No existe un valor center para esta propiedad. Unicamente sirve para “arrastrar” elementos hacia la derecha o hacia la izquierda, tanto como sea posible, generando un cambio en el flujo del documento HTML.
Ahora visualiza el resultado modificando la regla css del código anterior para elementos img de las siguientes maneras:
1) img {margin:10px; float:none;} /*Elemento img no es flotante */
2) img {margin:10px; float:right;} /*Elemento img es flotante */
3) img {margin:10px; float:left;} /*Elemento img es flotante */
Visualiza los resultados, que deberán ser similares a estos:
Comprobamos cómo con float:none; para la imagen, el comportamiento es el normal. Con float: left; el párrafo anterior a la imagen no cambia su comportamiento. Sin embargo, el párrafo posterior se sitúa envolviendo (wrapping) al elemento flotante. Con float: right; ocurre lo mismo, pero en este caso la imagen está lo más a la derecha posible dentro de su contenedor y el texto del párrafo que viene debajo envuelve la imagen por su lado izquierdo.
Un aspecto importante es que la propiedad float sólo debe usarse con elementos tipo block, o quizás sería preferible decir sobre elementos que tengan una anchura definida (valor width establecido. Un valor width establecido significa que lo habremos especificado a través de código sobre un elemento block, o que el elemento es un elemento img sin width especificado pero que tiene un valor width “implícito”, el ancho de la propia imagen).
Ahora bien, si decimos que sólo debe usarse con elementos tipo block ¿cómo es que hemos aplicado con éxito la propiedad a un elemento img que es un elemento inline? La explicación es que cuando se aplica la propiedad float sobre un elemento, éste automáticamente pasa a comportarse como una caja tipo block. Dicho esto podríamos pensar que también podríamos aplicarle la propiedad float a un párrafo en el ejemplo anterior. La respuesta es: no. No podemos, o al menos no debemos, porque los párrafos del ejemplo anterior aún siendo block no tienen un ancho especificado. La propiedad float sólo debe aplicarse a elementos con un ancho (width) definido explícita o implícitamente. Si se aplica la propiedad float a un elemento sin ancho especificado podemos tener resultados impredecibles, o diferentes según el navegador empleado. Por tanto no debemos hacerlo.
CAJAS ENVOLVENTES EN TORNO A UN ELEMENTO FLOTANTE
Hemos comprobado cómo un elemento como un párrafo envuelve a un elemento flotante como una imagen. La pregunta que nos planteamos ahora es: ¿cuál es la caja del párrafo envolvente? Lo podemos visualizar si en el anterior código CSS usamos estas reglas:
p {text-align: justify; margin:15px; border-style:solid; border-color:grey;}
img {margin:10px; float:left;}
En la imagen vemos la respuesta: el elemento flotante ha salido del flujo normal del documento. La caja del elemento envolvente tiene su forma normal y se encuentra por debajo del elemento flotante.
Los bordes, imágenes de fondo y colores de fondo de los elementos envolventes se sitúan debajo de los elementos flotantes a los que envuelven.
¿CUÁNTOS ELEMENTOS ENVUELVEN A UN ELEMENTO FLOTANTE?
En el ejemplo que venimos viendo un párrafo envuelve a la imagen que ha tomado posicionamiento flotante. ¿Pero qué ocurriría si tenemos varios párrafos de pequeño tamaño? ¿El primero envuelve y los demás siguen su flujo normal o todos los siguientes elementos van envolviendo?
Vamos a modificar el fragmento de código HTML de la etiqueta body así:
|
<body> |
Y el código CSS lo dejaremos así:
|
/* Curso CSS estilos aprenderaprogramar.com*/ |
Al comprobar el resultado, vemos que todos los elementos a continuación de un elemento flotante proceden a envolverlo por un lateral mientras haya espacio para ello. Podemos hacer que los elementos debajo de un elemento flotante dejen de envolverlo a partir de un elemento dado usando la propiedad clear, que explicaremos a continuación.
EJERCICIO
Para cada una de las siguientes afirmaciones indica si es verdadera o falsa, y justifica brevemente tu respuesta:
a) La propiedad float puede tomar cuatro valores: top, right, bottom y left.
b) float es una propiedad que nos permite maquetar páginas web (documentos HTML).
c) Usando float: center; podemos centrar el contenido de un elemento respecto de su caja contenedora.
d) Un elemento flotante sale del flujo normal de posicionamiento de elementos en una página web.
e) Todos los elementos a continuación de un elemento flotante lo envuelven, a no ser que especifiquemos lo contrario usando la propiedad clear.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
