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.