martes, 26 de noviembre de 2013

Como utilizar las propiedades float y clear para posicionar varios div


 La propiedad float especifica si el elemento seleccionado deber flotar, los valores que acepta pueden ser los siguientes:

left: El elemento flota hacia la izquierda.

right: El elemento flota hacia la derecha.

none: El elemento no flota y se visualiza tal cual se encuentra posicionado en el documento.

La propiedad clear especifica qué lados de un elemento ya no se permiten a otros elementos flotantes. Los valores que acepta pueden ser los siguiente:

left: No permite que los elementos floten a su izquierda.

right: No permite que los elementos floten a su derecha.

both: No permite que los elementos floten a ninguno de sus lados.

none: Permite que los elementos floten a ambos lados.

A continuación puedes ver un ejemplo práctico, hay dos clase .float y .clear, la clase ".float" reflotará a la izquierda a los elementos seleccionados, con .clear se dentendrá el reflotado de los elementos a ambos lados restaurando la posición del elemento seleccionado ...

Primer elemento flotante
Segundo elemento flotante
Restaurando los márgenes con clear
Tercer elemento flotante
cuarto elemento flotante


<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head> 
<title>Como utilizar las propiedades float y clear para posicionar varios div</title>
<style>
.float{
float: left;
padding: 20px;
margin: 20px;
border: 1px solid red;
}
.clear
{
clear: both;
padding: 20px;
margin: 20px;
border: 1px solid blue;
}
</style>
</head>
<body>
La propiedad float especifica si el elemento seleccionado deber flotar, los valores que acepta pueden ser los siguientes:
<br />
<br />
<strong>left:</strong> El elemento flota hacia la izquierda.<br /><br />
<strong>right:</strong> El elemento flota hacia la derecha.<br /><br />
<strong>none:</strong> El elemento no flota y se visualiza tal cual se encuentra posicionado en el documento.<br /><br />

La propiedad clear especifica qué lados de un elemento ya no se permiten a otros elementos flotantes. Los valores que acepta pueden ser 
los siguiente:
<br /><br />
<strong>left:</strong> No permite que los elementos floten a su izquierda.<br /><br />
<strong>right:</strong> No permite que los elementos floten a su derecha.<br /><br />
<strong>both:</strong> No permite que los elementos floten a ninguno de sus lados.<br /><br />
<strong>none:</strong> Permite que los elementos floten a ambos lados.<br /><br />

A continuación puedes ver un ejemplo práctico, hay dos clase .float y .clear, la clase ".float" reflotará a la izquierda a los 
elementos seleccionados, con .clear se dentendrá el reflotado de los elementos a ambos lados restaurando la posición del elemento 
seleccionado ...
<br /><br />
<div class="float">Primer elemento flotante</div>
<div class="float">Segundo elemento flotante</div>
<div class="clear">Restaurando los márgenes con clear</div>
<div class="float">Tercer elemento flotante</div>
<div class="float">cuarto elemento flotante</div>
</body>
</html>