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>
No hay comentarios:
Publicar un comentario