09 Mar Ejercicio sobre la propiedad clear:both (float)
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.
¿Como queda el documento html?
<!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>¿Como queda el documento css?
*{
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!
Entradas relacionadas:
Ejercicio visual dónde se debe indicar que tipo de posicionamiento se ha usado para desplazar una caja. Incluye solución y explicación.
¿Imaginas tener que especificar una por una los estilos a cada una de las etiquetas? El concepto de CSS nos ayuda a optimizar código. Entender sus propiedades nos puede ayudar mucho a ser mejores maqu...
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
Qué es la propiedad opacity de css y como podemos usarla. Atención porqué para transaprencias no siempre es la mejor opción.
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
No Comments