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 css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.
En internet se encuentra mucho material de gran calidad para aprender lenguajes como html, css, y javascript. ¿Pero todos los pdf sirven?
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Algunas webs muestran un teléfono en un lugar muy tentador en función de si es desktop o smartphone. Lo abordamos con css.
Como generar un parallax en una página web. Incluye ejemplo.
No Comments