CSS: las propiedades float y clear
La propiedad float sirve para posicionar elementos fuera del flujo normal del documento. Esta propiedad admite los valores left, right y none. Por defecto todos los elementos tienen la propiedad float a none, es decir, se situan dentro del flujo normal del documento.
float: left
div.floatizquierda {
float: left;
border: 1px dotted #666;
background: #f0f0f0;
margin:5px;
padding: 5px;
width:200px;
}
div.normal {
border: 1px dotted #666;
background:#ccc;
}
<div class="floatizquierda">
<p>El contenido de esta capa se encuentra flotante a la izquierda</p>
</div>
<div class="normal">
<p>El contenido de esta capa sigue el flujo normal del documento</p>
</div>
El contenido de esta capa se encuentra flotante a la izquierda
El contenido de esta capa sigue el flujo normal del documento
<div class="floatizquierda">
<p>El contenido de esta capa se encuentra flotante a la izquierda</p>
</div>
<div class="floatizquierda">
<p>El contenido de esta capa también está flotante a la izquierda</p>
</div>
<div class="normal">
<p>El contenido de esta capa sigue el flujo normal del documento</p>
</div>
El contenido de esta capa se encuentra flotante a la izquierda
El contenido de esta capa también está flotante a la izquierda
El contenido de esta capa sigue el flujo normal del documento
float: right
div.floatderecha{
float: right;
border: 1px dotted #666;
background: #f0f0f0;
margin:5px;
padding: 5px;
width:200px;
}
<div class="floatderecha">
<p>El contenido de esta capa se encuentra flotante a la derecha</p>
</div>
<div class="normal">
<p>El contenido de esta capa sigue el flujo normal del documento</p>
</div>
El contenido de esta capa se encuentra flotante a la derecha
El contenido de esta capa sigue el flujo normal del documento
<div class="floatderecha">
<p>El contenido de esta capa se encuentra flotante a la derecha</p>
</div>
<div class="floatderecha">
<p>El contenido de esta capa también está flotante a la derecha</p>
</div>
<div class="normal">
<p>El contenido de esta capa sigue el flujo normal del documento</p>
</div>
El contenido de esta capa se encuentra flotante a la derecha
El contenido de esta capa también está flotante a la derecha
El contenido de esta capa sigue el flujo normal del documento
clear
La propiedad clear, que puede tomar los valores left, right y both, sirve para "romper" la propiedad de flotación a izquierda, derecha o ambos lados, y que el flujo del documento siga debajo de la capa flotante.
.clear {
clear: both;
}
<div class="floatizquierda">
<p>El contenido de esta capa se encuentra flotante a la izquierda</p>
</div>
<div class="floatizquierda">
<p>El contenido de esta capa también está flotante a la izquierda</p>
</div>
<div class="clear"></div>
<div class="normal">
<p>El contenido de esta capa sigue el flujo normal del documento después de romper la flotación<p>
</div>
El contenido de esta capa se encuentra flotante a la izquierda
El contenido de esta capa también está flotante a la izquierda
El contenido de esta capa sigue el flujo normal del documento después de romper la flotación
