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>
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>
<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. |