Ejemplo práctico Float

Veremos como hacer 3 o 4 columnas con la propiedad Float, así podrás entender mejor esta herramienta poderosa de Css3.

Posicionamiento Flotante:
https://librosweb.es/libro/css/capitulo_5/posicionamiento_flotante.html

Limpiar Float:
http://librosweb.es/libro/css_avanzado/capitulo_1/limpiar_floats.html

Box-sizing:
http://es.learnlayout.com/box-sizing.html

Html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Columnas</title>
	<link rel="stylesheet" href="columnas.css" type="text/css">
</head>
<body>
<div class="menu">
	<div class="logo"><h1>Logo</h1></div>
	<div class="nav"><p>Inicio - Nosotros - Servicios - Contacto</p></div>
</div>
<div class="columnas">
	<div class="columnax3"><h2>Columna-1</h2></div>
	<div class="columnax3"><h2>Columna-2</h2></div>
	<div class="columnax3"><h2>Columna-3</h2></div>
	<div class="columnax3"><h2>Columna-4</h2></div>
</div>
<footer><p>Desarrollado por www.ignaciogutierrez.cl</p></footer>
</body>
</html>

Css

*{
 margin: 0;
 box-sizing: border-box;
}
.menu{
 text-align: center;
 overflow: hidden;
}
.logo{
 background-color: #A700FF;
 float: left;
 width: 30%;
}
.nav{
 float: left;
 width: 70%;
}
.columnas{
 background-color: #FFF740;
 width: 90%;
 margin: 0 auto;
 text-align: center;
 overflow: hidden;
}
.columnax3{
 background-color: #994D7D;
 width: 25%;
 height: 100px;
 float: left;
 padding: 10px;
 border: 2px #000 solid;
}
footer{
 background-color: #CC1488;
}