7. CSS: float
CSS: propiedad "float"
POR DEFECTO, los elementos HTML:- Se colocan en la parte izquierda de su contenedor .
- Los elementos "de bloque" no permiten que haya ningún otro elemento a su lado, ya que ocupan el 100% del ancho del contenedor.
Ejemplo:
La siguiente imagen se coloca por defecto a la izquierda dentro su contenedor. Como ya sabemos el contenedor puede ser el la etiqueta "<body>", o "<main>", o "<header>" o un "<div>", etc.
Si queremos que la imagen se coloque en la parte derecha, aplicaremos la propiedad "float":
CUIDADO: como se puede ver en la imagen la propiedad float no la hemos aplicado sobre el parrafo sino sobre la imagen.
Otro ejemplo:
Gracias a la propiedad float por ejemplo podremos poner 2 o más parrafos en paralelo. Por defecto 3 parrafos se disponen uno debajo del otro, así:
Si reducimos el ancho del primero con la intención de que el el segundo se ponga a su lado, no vamos a conseguir nada:
La propiedad "float" nos permite modificar ambas cosas. Es decir, gracias a la propiedad "float":
- Los elementos se pueden colocar en la parte derecha de su contenedor.
- Los elementos de bloque pueden tener elementos a sus lados.
Los posibles valores de la propiedad "float" son:
- left: posiciona los siguientes elementos a la derecha.
- right: posiciona el elemento en el extremo derecho de su contenedor, y el elemento que le sigue, a su izquierda.
Aplicar "float".
Imaginemos que en nuestro documento HTML tenemos un elemento "en linea" (<img>) y otro "de bloque" (<p>). Por defecto se mostrarán así:
Es muy posible que esta disposición no nos guste, y queramos que el parrafo se muestre a la derecha de la imagen. Para ello añadiremos "float: left" en la etiqueta <img>. El resultado es este:
"Float" implica salir del flujo.
Cuando aplicamos "float: left" sobre un elemento, aparentemente este no sufre ninguna modificación, pero en realidad ha desaparecido del flujo de elementos. Cuando un elemento desaparece del flujo, continua visualizandose, pero no ocupa espacio. Es esto en realidad lo que provoca que el parrafo aparezca a la derecha de la imagen.Por tanto, el espacio que en realidad ocupa el parrafo NO es este (azul):
porque la imagen ha salido del flujo y no ocupa espacio.
Cuando un elemento sale del flujo se producen casos inesperados.
CASO 1:Si intentamos asignar un "margin-left: 10%" a <p> para separarlo de la imagen ligeramente, el resultado sería este:
Como solucionarlo: para separar en realidad el parrafo de la imagen, podemos asignar un "margin-right" a la imagen.
CASO 2:
Imaginemos que decidimos usar una etiqueta <section> para agrupar la imagen y el parrafo, y le asignamos un borde negro. El resultado sería este:
Como solucionarlo: podemos asignar un alto al "section", o incluir esta declaración CSS en el "div": overflow: hidden. El resultado será este:
CASO 3:
Imaginemos que al elemento <p> le asignamos un "width: 50%". El <p> NO quedaría así:
Entonces, ¿qué pasará si a <p> le asignamos un "width: 10%"? En contra, de lo que podríamos pensar, se muestra debajo:
La propiedad "clear": inhibir el efecto "float"
Imaginemos ahora que añadimos otro parrafo debajo del primero. Este último parrafo también se verá "afectado" por el "float: left" de la imagen, así que aparecerá así:
<p style="clear: left">Lorem ipsum
La propiedad "clear" en un elemento, impide que le afecte la propiedad "float" de elementos que le precedan.
Otros valores de la propiedad clear son "right" y "both".
Ejercicios
a) Repasar el tutorial y los "casos inesperados" usando:- Un parrafo más largo de manera que rodee la imagen.
- "float: right" en vez de "float: left".
- Usando un elemento "de bloque" en vez de una imagen.
Comentarios
Publicar un comentario