▷ Propiedades FLOAT, CLEAR y OVERFLOW HIDDEN

 

📐 Entendiendo float, clear y overflow: hidden en CSS

Las propiedades float, clear y overflow: hidden en CSS son muy útiles para controlar el flujo y comportamiento de los elementos en el diseño de una página web. Aunque hoy en día usamos mucho Flexbox o Grid, estas propiedades siguen siendo importantes para comprender cómo se estructura visualmente el contenido.

---

🚤 ¿Qué es float en CSS?

La propiedad float se utiliza para colocar un elemento a la izquierda o derecha dentro de su contenedor, permitiendo que el contenido siguiente se envuelva a su alrededor.

📄 Sintaxis:

float: left;
float: right;
float: none;

🧪 Ejemplo básico:

<style>
.caja {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
  float: left;
  margin-right: 10px;
  color: white;
  padding: 10px;
}
</style>

<div class="caja">Caja flotada a la izquierda</div>
<p>Este texto se ajusta y rodea a la caja flotada.</p>

Resultado: la caja se alineará a la izquierda y el texto fluirá a su lado.

---

🧹 ¿Qué es clear en CSS?

Cuando un elemento anterior está flotado, puede afectar el posicionamiento del siguiente. La propiedad clear se usa para evitar que un elemento se acomode junto a elementos flotantes y obligarlo a empezar debajo.

📄 Sintaxis:

clear: left;
clear: right;
clear: both;
clear: none;

🧪 Ejemplo:

<div class="caja">Caja flotada a la izquierda</div>
<div style="clear: both;">Este div aparece debajo de la caja flotada</div>

⚠️ Esto es útil para evitar errores visuales cuando usamos float y queremos que un nuevo bloque comience después.

---

🔒 ¿Para qué sirve overflow: hidden?

Cuando se usa float, muchas veces el contenedor que lo envuelve "colapsa" y su altura no se ajusta automáticamente. overflow: hidden soluciona ese problema ocultando cualquier contenido que se desborde y obligando al contenedor a "envolver" correctamente sus elementos flotantes.

📄 Sintaxis:

overflow: hidden;

🧪 Ejemplo de uso correcto:

<style>
.contenedor {
  overflow: hidden;
  background-color: #f2f2f2;
  padding: 10px;
}

.caja {
  width: 150px;
  height: 100px;
  background-color: #2196F3;
  float: left;
  margin-right: 10px;
  color: white;
  padding: 10px;
}
</style>

<div class="contenedor">
  <div class="caja">Caja 1</div>
  <div class="caja">Caja 2</div>
</div>

💡 Con overflow: hidden, el contenedor conserva su altura y no se colapsa, incluso si las cajas están flotadas.

---

📌 Resumen de diferencias

• float: posiciona un elemento a la izquierda o derecha dentro de su contenedor.
• clear: evita que los elementos siguientes se acomoden junto a los flotantes.
• overflow: hidden: se usa para evitar el colapso del contenedor y ocultar contenido que se desborde.

---

🔧 ¿Cuándo usar estas propiedades hoy en día?

Con el auge de Flexbox y CSS Grid, el uso de float ha disminuido, pero sigue siendo útil para casos sencillos como:

• Colocar una imagen a un lado del texto.
• Diseños legacy o simples sin necesidad de Flexbox.
• Creación de elementos inline que requieren separación visual.

En el siguiente video te muestro un ejemplo de uso de las propiedades descritas en este artículo.

🗨️ ¿Qué opinas?
Me encantaría saber tu opinión sobre este tema. Déjame un comentario aquí abajo 💬 y, si te gustó el contenido, ¡no olvides seguir el blog para no perderte las próximas publicaciones! 📚✨