Cajas flotantes CSS

float

La propiedad float especifica si un cuadro debe flotar a la izquierda, a la derecha o no.

[Sintaxis]

float: left | right | none

• left: el elemento genera un cuadro de bloque que se flota hacia la izquierda. El contenido fluye en el lado derecho de la caja, comenzando en la parte superior.

• right: similar a 'left', excepto que la caja está flotando a la derecha, y el contenido fluye en el lado izquierdo de la caja, comenzando en la parte superior.

• none: el cuadro no está flotando.

 Ejemplo

[style.css]

p{
  width: 100px;
  height: 100px;
  float: left;
}
p#red{
  background-color: red;
}
p#blue{
  background-color: blue;
}

[index.html]

<p id="red">This is a paragraph</p>
<p id="blue">This is a paragraph</p>

 

clear

Esta propiedad indica qué lados de la(s) caja(s) de un elemento pueden no estar adyacentes a una caja flotante anterior.

[Sintaxis] 

clear: left | right | both | none

Ejemplo

[style.css]

p{
  width: 100px;
  height: 100px;
  float: left;
}
p#red{
  background-color: red;
}
p#blue{
  background-color: blue;
}
p#green{
  background-color: green;
  clear: left;
}

[index.html]  

<p id="red">This is a paragraph</p>
<p id="blue">This is a paragraph</p>
<p id="green">This is a paragraph</p>

 

Ver también  9.5 Floats. 

Reto

[style.css]

nav{
  float: left;
  width: 200px;
  margin-top: 30px;
}
footer{ 
  height: 50px;
  clear: both;
  text-align: center;
  background-color: #999999;
}
#main{
  float: left;
  width: 400px;
  padding-left: 30px;
  margin-top: 30px;
}
aside{
  float: right;
  width: 250px;
  margin-top: 30px;
}
#main2{
  float: left;
  margin-top: 30px;
  margin-bottom: 20px;
  padding-left: 30px;
  width: 600px;
}

 

 Fuente: https://www.w3.org/community/webed/wiki/CSS/Training/floating