La propiedad float de CSS especifica cómo debe flotar un elemento. La propiedad clear de CSS especifica qué elementos pueden flotar junto al elemento borrado y de qué lado.
La propiedad float puede tener los siguientes valores:
- left: El elemento flota a la izquierda de su contenedor.
- right: El elemento flota a la derecha de su contenedor.
- none: El elemento no flota (se mostrará justo donde aparece en el texto). este es el valor por defecto.
- inherit: El elemento hereda el valor flotante de su padre.
En su uso más simple, la propiedad float se puede usar para envolver texto alrededor de imágenes.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
}
</style>
</head>
<body>
<h2>Float Right</h2>
<p>In this example, the image will float to the right in the paragraph,
and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" 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.
Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Ejm con no float
En el siguiente ejemplo, la imagen se mostrará justo donde aparece en el texto (float: none;):
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: none;
}
</style>
</head>
<body>
<h2>Float None</h2>
<p>In this example, the image will be displayed just where
it occurs in the text (float: none;).</p>
<p><img src="pineapple.jpg" alt="Pineapple" 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>
Ejemplo: flotar uno al lado del otro
Normalmente, los elementos div se mostrarán uno encima del otro. Sin embargo, si usamos float: left podemos dejar que los elementos floten uno al lado del otro:
<!DOCTYPE html>
<html>
<head>
<style>
div {
float: left;
padding: 15px;
}
.div1 {
background: red;
}
.div2 {
background: yellow;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<h2>Float Next To Each Other</h2>
<p>In this example, the three divs will float next to each other.</p>
<div class="div1">Div 1</div>
<div class="div2">Div 2</div>
<div class="div3">Div 3</div>
</body>
</html>
La propiedad clear
Cuando usamos la propiedad float y queremos el siguiente elemento debajo (no a la derecha ni a la izquierda), tendremos que usar la propiedad clear. La propiedad clear especifica lo que debería suceder con el elemento que está al lado de un elemento flotante. Dicha propiedad tiene los siguientes valores:
- none: El elemento no se empuja debajo de los elementos flotantes izquierdo o derecho. esto es por defecto.
- left: El elemento se empuja debajo de los elementos flotantes izquierdos.
- right: El elemento se empuja debajo de los elementos flotantes a la derecha.
- both: El elemento se empuja debajo de los elementos flotantes izquierdo y derecho.
- inherit: El elemento hereda el valor clear de su padre.
Al borrar flotantes, debe hacer coincidir el clear con el float: si un elemento flota hacia la izquierda, entonces debe borrar hacia la izquierda. Su elemento flotante seguirá flotando, pero el elemento borrado aparecerá debajo de él en la página web.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div2 {
padding: 10px;
border: 3px solid red;
}
.div3 {
float: left;
padding: 10px;
border: 3px solid #73AD21;
}
.div4 {
padding: 10px;
border: 3px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Observa que div2 está después de div1 en el código HTML.
Sin embargo, dado que div1 flota hacia la izquierda,
el texto en div2 fluye alrededor de div1.</div>
<br><br>
<h2>With clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Aquí, clear: left; mueve div4 hacia abajo debajo
del div3 flotante. El valor "left" borra los elementos flotantes a la izquierda.
También puedes borrar "right" y "both".</div>
</body>
</html>
Truco clearfix
Si un elemento flotante es más alto que el elemento contenedor, se «desbordará» fuera de su contenedor. Luego podemos agregar un truco clearfix para resolver este problema.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix {
overflow: auto;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it,
so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With Clearfix</h2>
<p>We can fix this by adding a clearfix class with overflow: auto;
to the containing element:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
overflow: auto clearfix funciona bien siempre que puedas mantener el control de tus márgenes y relleno (de lo contrario, es posible que veas barras de desplazamiento). Sin embargo, el nuevo y moderno truco clearfix es más seguro de usar, y el siguiente código se usa para la mayoría de las páginas web.
Ejm
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 3px solid #4CAF50;
padding: 5px;
}
.img1 {
float: right;
}
.img2 {
float: right;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>Without Clearfix</h2>
<p>This image is floated to the right. It is also taller than the element containing it,
so it overflows outside of its container:</p>
<div>
<img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>
<div class="clearfix">
<img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>
</body>
</html>
He aquí unos ejemplos:
Sin embargo, esto no es muy flexible. Está bien si puede garantizar que las cajas siempre tendrán la misma cantidad de contenido. Pero muchas veces, el contenido no es el mismo. Si prueba el ejemplo anterior en un teléfono móvil, verá que el contenido del segundo cuadro se mostrará fuera del cuadro. Aquí es donde CSS3 Flexbox resulta útil, ya que puede estirar automáticamente las cajas para que sean tan largas como la caja más larga:
He aquí un ejemplo
También podemos utilizar float y clear para crear un menú, lo podemos ver en el siguiente ejemplo
Ejm
<!DOCTYPE html>
<html lang="es">
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.active {
background-color: red;
}
</style>
</head>
<body>
<ul>
<li><a href="#"class="active">Home</a>
<li><a href="#">Noticias</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Sobre nosotros</a></li>
</ul>
</body>
</html>
Resumen
| Propiedad |
Descripción |
| box-sizing |
Define cómo se calculan el ancho y la altura de un elemento: si deben incluir relleno y bordes, o no |
| clear |
Especifica lo que debería suceder con el elemento que está al lado de un elemento flotante |
| float |
Especifica si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto |
| overflow |
Especifica qué sucede si el contenido desborda el cuadro de un elemento. |
| overflow-x |
Especifica qué hacer con los bordes izquierdo/derecho del contenido si se desborda el área de contenido del elemento. |
| overflow-y |
Especifica qué hacer con los bordes superior/inferior del contenido si se desborda el área de contenido del elemento. |