Ejercicio sobre la propiedad clear:both (float)

Ejercicio sobre la propiedad clear:both (float)

Print Friendly, PDF & Email
Ejercicio sobre la propiedad clear:both (float)
Valora esta entrada

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!

Entradas relacionadas:

Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 613
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 545
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Dimensiones reales de una caja en CSS
- 247
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Guía rápida para crear botones personalizados con CSS
- 193
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Box Sizing, como modificar el modelo de cajas convencional
- 321
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
¿Maquetar con float:left o con display:inline-block? Ejercicio css
- 42
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.
Ejercicio css. Separar el css de un html
- 27
Ejercicio CSS en el que a partir de una hoja html dada se pide separar al máximo html y css en hojas separadas. Incluye solución.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Menú horizontal con submenú desplegable horizontal mediante CSS
- 366
Ejemplo de menú horizontal con submenú desplegable horizontal mediante CSS. Incluye archivo descargable.
Ejercicio nivel básico sobre selectores CSS
- 42
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.