Unidad 17. Estilos CSS Avanzados (XVII)


17.15. Elementos flotantes

Tenemos la propiedad float, que permite que cualquier elemento flote en un lado determinado de la pantalla mientras el resto sigue el flujo natural.

Observa estos ejemplos:

©

Este texto tiene un elemento flotante a la izquierda.

Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.

©

Este texto tiene un elemento flotante a la derecha.

Además le hemos dado un tamaño de fuente mayor para que se note mejor el efecto.

Hemos utilizado los valores left y right respectivamente. En estos casos a los párrafos que contienen el símbolo de copyright se les han aplicado la propiedad CSS float:

<p style="float:left; font-size: 25px; border: 1px solid black; margin:3px;">&copy;</p>
<p style="float:right; font-size: 25px; border: 1px solid black; margin:3px;">&copy;</p>

 

Pero si vemos detenidamente esta propiedad veremos que encontramos un problema:

©
©

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.

Como este párrafo que ocupa toda la anchura del bloque div padre.

¿Cómo evitamos que el elemento flotante quede a la derecha del segundo párrafo?

 

Para ello deberemos utilizar la propiedad clear. Esta propiedad permite romper el ajuste que se esté realizando por una etiqueta anterior marcada con float.

Clear puede tomar 3 valores: left, right o both, para romper el float de izquierda, derecha o ambos respectivamente.

Por lo que si le aplicamos un clear: right; al segundo párrafo este se mostrará sin verse afectado por el float:

©
©

Este texto tiene un elemento flotante a la derecha.

Pero quiero que este párrafo no se vea afectado por el bloque flotante y se muestre sin tener que ajustarse a él.

Como este párrafo que ocupa toda la anchura del bloque div padre.

El código que hemos utilizado es el siguiente: <p style="clear: right;">

Observa que al hacer esto, el segundo párrafo no comienza hasta que no acaba el elemento flotante.

Del mismo modo esta propiedad nos ayudará en este caso, donde tenemos dos elementos flotantes a la izquierda:

©
©
©
©

Este texto tiene dos elementos flotantes a la izquierda.

Observa también que el elemento flotante sobresale del bloque, ya que no se tienen en cuenta para calcular el alto.

Queremos que los dos bloques estén flotando a la izquierda pero uno debajo del otro.

Para ello deberemos aplicarle al segundo elemento un clear: left; para que elimine el comportamiento del primer elemento que ya estaba flotando, y aparezca a continuación style="float: left; clear: left;".

Y obtendríamos lo siguiente:

©
©
©
©

Este texto tiene dos elementos flotantes a la izquierda.

Ahora uno se encuentra debajo del otro, y el texto fluye teniéndolos en cuenta a ambos.

Aunque puede llegar un párrafo que deje de verse afectado.

¡Como éste!

 


Marzo-2015
Pág. 17.17
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.