Concepto float CSS. none, left, right y ¿centrar?. Colocar texto alrededor de una imagen. Ejemplos (CU01034D)

Resumen: Entrega nº34 del Tutorial básico del programador web: CSS desde cero.
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.

css

 

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>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estilosCU01034DA.css">
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p>Aquí otro párrafo de texto. CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”.  Así, podemos decir que el lenguaje CSS sirve para dotar de presentación y aspecto, de “estilo”, a una página web.
</p>
</div>
</body>
</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*/
*{font-family: arial; }
body {width: 410px; border-style: dotted; }
div {border-style: solid; margin: 20px; padding: 5px; background-color: yellow;}
p {text-align: justify; margin:15px;}
img {margin:10px;}

 

 

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:

float css

 

 

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;}

texto alrededor imagen css

 

 

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>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p>Aquí primer párrafo tras la imagen</p> <p>Aquí segundo párrafo tras la imagen</p>
<p>Aquí tercer párrafo tras la imagen</p> <p>Aquí cuarto párrafo tras la imagen</p>
<p>Aquí quinto párrafo tras la imagen</p>
</div>
</body>

 

 

Y el código CSS lo dejaremos así:

/* Curso CSS estilos aprenderaprogramar.com*/
*{font-family: arial; }
body {width: 510px; border-style: dotted; }
div {border-style: solid; margin: 15px; padding: 5px; background-color: yellow;}
p {text-align: justify; margin:15px; border-style:solid; border-color:grey;}
img {margin:10px; float:left;}

 

cajas box-model con float css

 

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 acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

MARZO - ABRIL 2017

1. Java / J2EE
2. Entornos Oracle
3. JavaScript, jQuery
4. .NET, C#
5. Entornos SQL Server
6. HTML, CSS
7. Php, MySql
8. Android, iOS


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación