caja-tradicional.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Caja Tradicional</title>
	<style>
		section.info{
			background: grey;
			overflow: auto;
		}
		section.info img{
			float: left;
			margin-right: 10px;
		}
	</style>
</head>
<body>
	<section class="info">
		<img src="IMG/jeje.jpg" alt="" width="250px">
		<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil commodi culpa aperiam alias quidem, animi repellendus placeat, ipsa reiciendis at a, praesentium vitae ad minus, id optio ea quo. Magnam.</p>
		
	</section>
</body>
</html>
<!--
El modelo de caja tradicional dice que podemnos hacer que diferentes elementos independientemente de su tipo, se pueden ubicar a lado y lado de nuestra pagina web, dandole un aspecto flotante. Cabe recordar que segun el tipo de caja, esta se ubicara un por cada linea o varias en linea 
El modelo de caja tradicional establece que los elementos pueden flotar a cada lado de la ventana y compartir espacio en la misma línea con otros elementos, sin importar su tipo.  Por ejemplo, si tenemos dos elementos Block que representan columnas en el diseño, podemos posicionar una columna a la izquierda y la otra columna a la derecha haciendo que los elementos floten hacia el lado que queremos.

float – Esta propiedad permite a un elemento flotar hacia un lado u otro, y ocupar el espacio disponible, incluso cuando tiene que compartir la línea con otro elemento. Los valores disponibles son none (el elemento no flota), left (el elemento flota hacia la izquierda) y right (el elemento flota hacia la derecha)

clear – Esta propiedad restaura el flujo normal del documento, y no permite que el elemento siga flotando hacia la izquierda, la derecha o ambos lados. Los valores disponibles son none, left, right, y both (ambos).
-->	