Ejercicio sobre la propiedad clear:both (float)

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;

ejercicio css float clear

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.