El posicionamiento flotante es una propiedad que nos permite hacer saltar las cajas del flujo normal del documento.
Nos permite posicionar elementos a la izquierda y/o a la derecha de su elemento contenedor.
En caso de no existir elemento contendor se considera el body.
Puede tomar los siguientes valores:
float: left | right | both;Una de las características del posicionamiento flotante es que el resto de cajas del documento se redistribuyen para ocupar el espacio vacío dejado por elemento con float.
Ejemplo de uso de float
En este ejemplo tenemos una caja centrada horizontalmente de ancho real 500 + 20 * 2 (paddings) + 1*2 (borders).
Contiene 1 imagen y 2 párrafos.
Se aplica float:left; a la imagen.
El resultado es que los dos párrafos se contornean alrededor de la imagen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplos posicionamiento flotante y clear">
<meta name="author" content="Francesc Ricart">
<title>Posicionamiento flotante cajas</title>
<style>
.contenedor{
margin:auto;
width:500px;
padding:20px;
border:1px solid #000;
}
img{
float:left;
}
</style>
</head>
<body>
<div class="contenedor">
<img src="spidercerdo.jpg" alt="spider cerdo">
<p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error maiores eveniet ab beatae quod.</p>
<p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto officiis exercitationem. Iure quaerat, neque. Iure.</p>
</div>
</body>
</html>Ejemplo de uso de la propiedad clear
Clear es una propiedad que sirve para borrar floats a partir de la caja en que son citados.
Es muy usado cuando se maqueta mediante floats (es un tipo de maquetado que a mi no me gusta pero ya hablaremos de ello más adelante)
Por ejemplo en el ejemplo hemos aplicado un float:left; para limpiar un float left.
Los valores que puede tomar son
clear: left | right | both;Fijaros como en la imagen adjunta el segundo párrafo ha saltado de nivel justo por debajo de la imagen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplos posicionamiento flotante y clear">
<meta name="author" content="Francesc Ricart">
<title>Posicionamiento flotante cajas</title>
<style>
.contenedor{
margin:auto;
width:500px;
padding:20px;
border:1px solid #000;
}
img{
float:left;
}
.segundo{clear:left;}
</style>
</head>
<body>
<div class="contenedor">
<img src="spidercerdo.jpg" alt="spider cerdo">
<p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error maiores eveniet ab beatae quod.</p>
<p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto officiis exercitationem. Iure quaerat, neque. Iure.</p>
</div>
</body>
</html>Otros usos de float
Float nos permite por ejemplo:
- Apilar elementos lista o enlaces uno al lado de otro para simular un menú de navegación.
- Desplazar un elemento de un menú a un extremo, al principio o al final.
- Apilar contenedores cuyos anchos son en porcentaje para simular las columnas de un documento web.
Veremos estos casos detallados en futuros ejemplos y comparadas con otros métodos de posicionamiento de cajas.¡Hola!
Querido lector,
Espero que esta publicación te sea de utilidad para repasar casos prácticos de aplicación de float y de clear.
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta