Cajas de igual altura con float y clear

Cajas de igual altura con float y clear

Vamos a establecer una altura fija para realizar nuestro ejercicio, veamos el código:

<!DOCTYPE html>
<html lang="es">
<head>
<style>
* {
box-sizing: border-box;
}

.box {
float: left;
width: 50%;
padding:50px;
height: 300px;
}

.cleafix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>

<body>
<h2>Cajas de igual altura</h2>
<p>Haciendo flotar cajas de igual altura</p>
<div class="clearfix">
<div class="box"style="background-color: #bbb;">
<p>Texto 1</p>
</div>
<div class="box"style="background-color: #ccc">
<p>Texto 2</p>
<p>Texto 3</p>
<p>Texto 4</p>
</div>
</div>
</body>
</html>

El resultado es el siguiente

Sutil Web
Sutil Web - Tu sueño hecho diseño

Suspendisse ultricies ultrices viverra. Morbi rhoncus laoreet tincidunt mauris interdum convallis metus suspendiss lacus est.