La propiedad float nos permite posicionar cajas a izquierda y derecha y hacer que el resto de cajas del documento web fluyan normalmente alrededor de la caja desplazada.
Se suele usar por ejemplo para rodear imágenes de texto.
También se usa mucho para maquetar.
La propiedad float pero, debe ir acompañada de la propiedad clear:both | left | right;
El uso de clear en ocasiones es difícil de entender. Así que he preparado un ejercicio dónde se entienda bien su utilidad.
Sería interesante antes hacer el ejercicio que leyeras estas entradas.
A modo complementario, sería interesante contrastar este ejercicio con este otro para valorar la diferencia de maquetar con inline-block o float.
Entremos en materia.
Enunciado
Crea 8 cajas distribuidas según se muestra en la imagen y haciendo uso de la propiedad float: left | right | both;
Sigue las siguientes especificaciones:
- Las cajas de la primera fila tienen anchos de 33.33% cada una. El color utilizado es el #bb00bb.
- La caja de la segunda fila tienen ancho del 100%. El color utilizado es el #252525.
- La caja de la tercera fila tiene ancho del 33.33%. El color utilizado es el #6499fc.
- Las cajas de la cuarta fila tienen ancho del 33.33% y no se apilan con las de la tercera fila. El color utilizado es el #ff0064.
- Todas las cajas tienen una altura de 200px.
- Las separaciones que se observan entre cajas son en realidad un border de 5px de color #ffffff.
Haz un uso apropiado de la propiedad clear dónde lo consideres oportuno.
Solución del ejercicio
Para resolver este ejercicio podríamos escribir clear:left; sin embargo la solución presentada es con que clear:both;es lo más habitual.
La gracia del ejercicio es que las 3 últimas cajas se apilan con la penúltima fila y que al escribir la propiedad clear:both; conseguimos el dibujo deseado.
Muy importante ten en cuenta que no hay margins.
De usar margins no podrías garantizar que el ancho total de la suma de todas las cajas sea el 100%. El margin no es incluido por la propiedad box-sizing.[vc_custom_heading text=»¿Como queda el documento html?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
<!DOCTYPE html>
<html>
<head>
<title>Propiedad clear</title>
<meta name="author" content="francesc ricart"/>
<meta charset="utf-8">
<style>
/*Instrucciones css*/
</style>
</head>
<body>
<!-- div.caja-$*8 -->
<div class="caja-1">33.33%</div>
<div class="caja-2">33.33%</div>
<div class="caja-3">33.33%</div>
<div class="clear"></div>
<div class="caja-4">100%</div>
<div class="clear"></div>
<div class="caja-5">33.33%</div>
<div class="clear"></div>
<div class="caja-6">33.33%</div>
<div class="caja-7">33.33%</div>
<div class="caja-8">33.33%</div>
</body>
</html>[vc_custom_heading text=»¿Como queda el documento css?» font_container=»tag:h3|text_align:left» use_theme_fonts=»yes»]
*{
margin:0;
padding:0;
box-sizing:border-box;}
.clear{
clear:both;
}
div[class*="caja-"]{
height:200px;
padding:50px;
float:left;
border:5px solid #fff;
color:#fff;
font-size:32px;
}
.caja-1,.caja-2,.caja-3{
width:33.33%;
height:200px;
background-color:#bb00bb;
border:5px solid #fff;
}
.caja-4{
width:100%;
background-color:#252525;
}
.caja-5{
width:33%;
background-color:#6499fc;
}
.caja-6, .caja-7, .caja-8{
width:33.33%;
background-color:#ff0064;
}Si juntamos todas las piezas resolvemos el ejercicio.¡Hola!
Querido lector,
Con este ejercicio hemos practicado la float y la propiedad clear.
¿Te ves con ánimo de maquetar la estructura de una página web?
¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!
Deja una respuesta