float

LA PROPIEDAD FLOAT

La propiedad float indica como debe flotar un elemento.

se usa para posicionar y dar formato al contenido. Por ejemplo, permite que una imagen flote a la izquierda del texto dentro de un contenedor.

Esta propiedad puede tener uno de los siguientes valores:

left:	El elemento flota a la izquierda en el contenedor
right:	El elemento flota a la derecha dentro de su contenedor
none:	El elemento no flota.(se mostrará en la misma linea donde está en el código) esto es por defecto
inherit:	El elemento hereda el valor float del elemento padre

En su uso más sencillo, la propiedad float se puede utilizar para ajustar el texto alrededor de las imágenes.

Ejemplo de float: right;

En el siguiente ejemplo se indica que la imagen debe flotar a la derecha del texto, y el texto del párrafo rodeará la imagen

koala Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

Ejemplo


<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<p><img src="koala.jpg" alt="koala" style="width:170px;height:
170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, 
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae 
massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis 
sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut 
hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum 
dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. 
Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non 
fermentum. Sed dapibus pulvinar nibh tempor porta. Creas tacos para los leones peruanos. Mauris
quis diam velit.</p>
</body>
</html>

Ejemplo de float: left;

En el siguiente ejemplo se especifica que la imagen debe flotar a la izquierda del texto:

Ejemplo


<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
}
</style>
</head>
<body>
<p><img src="koala.jpg" alt="koala" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, 
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula 
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed
ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit
risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In
at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget 
tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed 
dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam
velit.</p>
</body>
</html>

Ejemplo de float: none

En el siguiente ejemplo, la imagen se mostrará justo donde aparece en el texto (float: none;):

Ejemplo


<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<p><img src="koala.jpg" alt="koala" style="width:170px;height:170px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, 
nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula 
venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.
Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare
eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus 
congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at 
libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus
gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus 
pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>

LA PROPIEDAD CLEAR

La propiedad clear especifica si un elemento permite elementos flotantes a sus lados.

Esta propiedad puede tener uno de los siguientes valores:

none:	Permite elementos flotantes en ambos lados. Esto es por defecto
left:	No permite elementos flotantes en su lado izquierdo.
right:	No permite elementos flotantes en su lado derecho.
both:	No permite elementos flotantes ni al lado izquierdo ni al derecho.
inherit:	El elemento hereda el valor clear del elmento padre

El uso más común de la propiedad clear es después de haber usado la propiedad float en un elemento.

Al despejar elementos flotantes, se debe hacer coincidir el clear con el float: si un elemento flota a la izquierda, entonces se debe despejar a la izquierda. El elemento flotante continuará flotando, pero el elemento con la propiedad clear aparecerá debajo de él en la página web.

En el ejemplo siguiente se despeja el float a la izquierda. Significa que no se permiten elementos flotantes en el lado izquierdo del div:

Sin clear

div1

div2 : Note que el div2 está después del div1 en el código HTML. Sin embargo, dado que el div1 flota a la izquierda, el texto del div2 fluye alrededor del div1.

Con clear

div3

div4 : Aquí, clear: left; mueve el div4 hacia abajo por debajo del div3 flotante. El valor "left" despeja los elementos flotantes a la izquierda. También se puede despejar a la derecha ''right" y a ambas "both".

Ejemplo


<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 { 
border: 1px solid red; 
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 : Note que el div2 está después del div1 en el código HTML.
Sin embargo, como el div1 flota a la izquierda, el texto en el div2 fluye alrededor del div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 : Aquí, clear: left; mueve el div4 hacia abajo por debajo del div3 flotante. El valor "left" despeja los elementos flotantes a la izquierda. También se puede despejar a la derecha ''right" y a ambas "both".</div>
</body>
</html>