La propiedad CLEAR

La propiedad CSS clear controla cómo se posicionan los elementos en relación con elementos flotantes (float). Especifica si un elemento puede tener elementos flotantes a sus lados o debe moverse debajo de ellos, usando valores como left, right, both o none.

Introducción

La propiedad clear controla el comportamiento de elementos en relación con elementos flotantes (float). Especifica si un elemento puede tener elementos flotantes a sus lados o si debe moverse debajo de ellos.

Sintaxis Básica

clear: none | left | right | both | inline-start | inline-end;

Valores Disponibles

Valores principales:

none (valor por defecto): El elemento no se mueve debajo de elementos flotantes
left: El elemento se mueve debajo de elementos flotantes a la izquierda
right: El elemento se mueve debajo de elementos flotantes a la derecha
both: El elemento se mueve debajo de elementos flotantes en ambos lados

Valores lógicos (CSS Logical Properties):

inline-start: Depende de la dirección del texto (izquierda en LTR, derecha en RTL)
inline-end: Depende de la dirección del texto (derecha en LTR, izquierda en RTL)

Concepto Fundamental: Elementos Flotantes

Antes de entender clear, debemos entender float:

.float-left {
  float: left;
  width: 200px;
  height: 150px;
  background: lightblue;
  margin: 10px;
}

Los elementos flotantes "salen" del flujo normal del documento, y otros elementos fluyen a su alrededor.

Ejemplos Básicos

Ejemplo 1: Problema sin `clear`

<!DOCTYPE html>
<html>
<head>
<style>
.float-box {
  float: left;
  width: 150px;
  height: 100px;
  background: #3498db;
  margin: 10px;
  padding: 10px;
}

.content {
  background: #ecf0f1;
  padding: 10px;
  border: 2px solid #7f8c8d;
}
</style>
</head>
<body>

<div class="float-box">Caja flotante</div>
<div class="content">
  Este contenido fluye alrededor de la caja flotante. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

</body>
</html>

Ejemplo 2: Usando `clear: left`

.float-box {
  float: left;
  width: 150px;
  height: 100px;
  background: #3498db;
  margin: 10px;
}

.cleared-content {
  clear: left; /* Se mueve debajo de elementos flotantes a la izquierda */
  background: #e74c3c;
  padding: 10px;
  border: 2px solid #c0392b;
}

Ejemplos Prácticos

Ejemplo 1: Galería de imágenes con texto

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 800px;
  margin: 0 auto;
  background: #f9f9f9;
  padding: 20px;
}

.gallery img {
  float: left;
  width: 180px;
  height: 120px;
  margin: 0 15px 15px 0;
  border-radius: 8px;
  object-fit: cover;
}

.description {
  margin-top: 20px;
  padding: 15px;
  background: white;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Sin clear - el texto envuelve la última imagen */
.without-clear {
  color: #666;
}

/* Con clear - el texto comienza debajo de todas las imágenes */
.with-clear {
  clear: left;
  color: #27ae60;
  border-left: 4px solid #27ae60;
}
</style>
</head>
<body>

<div class="container">
  <h2>Galería de Fotos</h2>
  
  <div class="gallery">
    <img src="https://via.placeholder.com/180x120/3498db/fff" alt="Imagen 1">
    <img src="https://via.placeholder.com/180x120/e74c3c/fff" alt="Imagen 2">
    <img src="https://via.placeholder.com/180x120/2ecc71/fff" alt="Imagen 3">
    
    <p class="without-clear">
      Este texto fluye alrededor de las imágenes porque no tiene clear. 
      Observa cómo el contenido se ajusta al espacio disponible.
    </p>
    
    <p class="with-clear">
      Este texto tiene clear: left, por lo que comienza debajo de todas 
      las imágenes flotantes. Es útil para secciones que deben estar 
      completamente separadas.
    </p>
  </div>
</div>

</body>
</html>

Ejemplo 2: Sistema de comentarios

<!DOCTYPE html>
<html>
<head>
<style>
.comments-container {
  width: 600px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.comment {
  background: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.comment-avatar {
  float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #3498db;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
}

.comment-content {
  overflow: hidden; /* Crea un nuevo contexto de formato */
}

.comment-meta {
  color: #7f8c8d;
  font-size: 0.9em;
  margin-bottom: 8px;
}

.comment-text {
  line-height: 1.6;
}

/* Comentario destacado */
.featured-comment {
  clear: both; /* Asegura que esté debajo de elementos flotantes anteriores */
  background: linear-gradient(135deg, #fff5e6, #ffeccc);
  border-left: 4px solid #f39c12;
}

/* Separador entre secciones */
.comments-divider {
  clear: both;
  height: 2px;
  background: linear-gradient(to right, transparent, #3498db, transparent);
  margin: 30px 0;
  text-align: center;
  color: #3498db;
  font-weight: bold;
  padding: 10px 0;
}
</style>
</head>
<body>

<div class="comments-container">
  <h2>Comentarios</h2>
  
  <div class="comment">
    <div class="comment-avatar">JS</div>
    <div class="comment-content">
      <div class="comment-meta">Juan Sánchez • Hace 2 horas</div>
      <div class="comment-text">Excelente artículo, muy informativo. Me gustó especialmente la sección sobre CSS Grid.</div>
    </div>
  </div>
  
  <div class="comment">
    <div class="comment-avatar">ML</div>
    <div class="comment-content">
      <div class="comment-meta">María López • Hace 3 horas</div>
      <div class="comment-text">Podrías agregar más ejemplos prácticos de Flexbox, sería muy útil para principiantes.</div>
    </div>
  </div>
  
  <div class="comment featured-comment">
    <div class="comment-avatar">AP</div>
    <div class="comment-content">
      <div class="comment-meta">Autor del Post • Destacado</div>
      <div class="comment-text">¡Gracias por sus comentarios! Estoy preparando un tutorial avanzado de Flexbox con ejemplos prácticos.</div>
    </div>
  </div>
  
  <div class="comments-divider">Respuestas a comentarios destacados</div>
  
  <div class="comment">
    <div class="comment-avatar">CR</div>
    <div class="comment-content">
      <div class="comment-meta">Carlos Rodríguez • Hace 1 hora</div>
      <div class="comment-text">Me alegra escuchar eso, estaré atento al nuevo tutorial.</div>
    </div>
  </div>
</div>

</body>
</html>

Técnicas Avanzadas

Clearfix Hack (Solución clásica)

/* Método 1: Clearfix clásico */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Método 2: Usando overflow */
.clearfix-container {
  overflow: auto; /* Crea nuevo contexto de formato */
}

/* Método 3: Flexbox (moderno) */
.clearfix-flex {
  display: flex;
  flex-direction: column;
}

Ejemplo: Layout con columnas flotantes

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.layout {
  width: 900px;
  margin: 0 auto;
  background: #f5f5f5;
  padding: 20px;
}

.header, .footer {
  background: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
}

.main-content {
  margin: 20px 0;
}

/* Columnas flotantes */
.sidebar {
  float: left;
  width: 250px;
  background: #3498db;
  color: white;
  padding: 20px;
  border-radius: 5px;
  min-height: 300px;
}

.content {
  float: right;
  width: 600px;
  background: white;
  padding: 20px;
  border-radius: 5px;
  min-height: 400px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Clearfix para contenedor padre */
.main-content::after {
  content: "";
  display: table;
  clear: both;
}

/* Footer con clear both para estar debajo */
.footer {
  clear: both; /* Asegura que esté debajo de columnas flotantes */
  margin-top: 20px;
}

.widget {
  float: left;
  width: 180px;
  height: 120px;
  margin: 10px;
  background: #e74c3c;
  color: white;
  padding: 15px;
  border-radius: 8px;
}

.widgets-container::after {
  content: "";
  display: table;
  clear: both;
}
</style>
</head>
<body>

<div class="layout">
  <div class="header">
    <h1>Mi Sitio Web</h1>
  </div>
  
  <div class="main-content">
    <div class="sidebar">
      <h3>Menú Lateral</h3>
      <ul>
        <li>Inicio</li>
        <li>Acerca de</li>
        <li>Servicios</li>
        <li>Contacto</li>
      </ul>
    </div>
    
    <div class="content">
      <h2>Contenido Principal</h2>
      
      <div class="widgets-container">
        <div class="widget">Widget 1</div>
        <div class="widget">Widget 2</div>
        <div class="widget">Widget 3</div>
        <div class="widget">Widget 4</div>
      </div>
      
      <p>Este es el contenido principal que fluye alrededor del sidebar.</p>
    </div>
  </div>
  
  <div class="footer">
    <p>&copy; 2024 Mi Sitio Web. Todos los derechos reservados.</p>
  </div>
</div>

</body>
</html>

Alternativas Modernas a `clear`

Usando Flexbox:

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex: 1 1 200px;
  background: #3498db;
  padding: 20px;
}

Usando CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.grid-item {
  background: #2ecc71;
  padding: 20px;
}

Mejores Prácticas

1. Usar clearfix en contenedores:

/* Recomendado para contenedores con hijos flotantes */
.container {
  overflow: auto; /* o hidden */
}

/* O con pseudo-elemento */
.container::after {
  content: "";
  display: table;
  clear: both;
}

2. Evitar clear innecesarios:

/* ❌ No uses clear si no hay elementos flotantes */
.unnecessary-clear {
  clear: both; /* Innecesario */
}

/* ✅ Solo cuando sea necesario */
.after-floats {
  clear: both; /* Solo si hay elementos flotantes arriba */
}

3. Considerar métodos modernos:

/* Para nuevos proyectos, considera Flexbox o Grid */
.modern-layout {
  display: flex;
  flex-wrap: wrap;
}

.modern-layout-item {
  flex: 1 1 300px;
  margin: 10px;
}

Debugging y Problemas Comunes

Problema 1: Clear no funciona

/* ❌ El problema: clear aplicado al elemento incorrecto */
.float-left { float: left; }
.float-right { float: right; }

.content {
  clear: left; /* Solo limpia floats izquierdos */
}

/* ✅ Solución: Usar clear: both si hay floats en ambos lados */
.content {
  clear: both;
}

Problema 2: Layout colapsado

<!-- ❌ El contenedor colapsa porque solo contiene elementos flotantes -->
<div class="container">
  <div class="float-box">Flotante 1</div>
  <div class="float-box">Flotante 2</div>
</div>

<!-- ✅ Solución: Aplicar clearfix al contenedor -->
<div class="container clearfix">
  <div class="float-box">Flotante 1</div>
  <div class="float-box">Flotante 2</div>
</div>

Compatibilidad

Navegador	Soporte	Notas
Chrome	✅ Completo	1+
Firefox	✅ Completo	1+
Safari	✅ Completo	1+
Edge	✅ Completo	12+
IE	✅ Completo	4+

Nota: Los valores lógicos (inline-start, inline-end) tienen soporte limitado en navegadores antiguos.

Ejemplo Interactivo Final

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.demo-container {
  width: 800px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.controls {
  background: #2c3e50;
  color: white;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  margin-bottom: 20px;
}

.control-group {
  margin: 10px 0;
}

select, button {
  padding: 8px 15px;
  margin: 0 5px;
  border: none;
  border-radius: 5px;
  font-size: 14px;
}

button {
  background: #3498db;
  color: white;
  cursor: pointer;
}

button:hover {
  background: #2980b9;
}

.demo-area {
  background: #ecf0f1;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  min-height: 400px;
}

.float-box {
  float: left;
  width: 150px;
  height: 100px;
  background: #e74c3c;
  margin: 10px;
  padding: 15px;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.test-element {
  background: #3498db;
  color: white;
  padding: 20px;
  margin: 20px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.code-display {
  background: #34495e;
  color: #ecf0f1;
  padding: 15px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  margin-top: 20px;
  overflow-x: auto;
}

.float-right {
  float: right;
  background: #27ae60;
}
</style>
</head>
<body>

<div class="demo-container">
  <div class="controls">
    <h3>Controla la propiedad clear</h3>
    
    <div class="control-group">
      <label for="clearValue">Valor de clear:</label>
      <select id="clearValue">
        <option value="none">none (por defecto)</option>
        <option value="left">left</option>
        <option value="right">right</option>
        <option value="both">both</option>
      </select>
      
      <button onclick="addFloatLeft()">Agregar Float Left</button>
      <button onclick="addFloatRight()">Agregar Float Right</button>
      <button onclick="resetDemo()">Resetear</button>
    </div>
  </div>
  
  <div class="demo-area" id="demoArea">
    <div class="float-box">Float Left 1</div>
    <div class="float-box float-right">Float Right 1</div>
    
    <div class="test-element" id="testElement">
      Este es el elemento de prueba. Observa cómo se comporta con diferentes valores de clear.
    </div>
  </div>
  
  <div class="code-display" id="codeDisplay">
/* CSS Actual */
.test-element {
  clear: none;
}
  </div>
</div>

<script>
const testElement = document.getElementById('testElement');
const demoArea = document.getElementById('demoArea');
const codeDisplay = document.getElementById('codeDisplay');
const clearValue = document.getElementById('clearValue');

let floatCount = 2;

function updateClear() {
  const value = clearValue.value;
  testElement.style.clear = value;
  
  // Actualizar código mostrado
  codeDisplay.textContent = `/* CSS Actual */
.test-element {
  clear: ${value};
}`;
  
  // Cambiar color según el valor
  const colors = {
    'none': '#3498db',
    'left': '#e74c3c',
    'right': '#27ae60',
    'both': '#f39c12'
  };
  testElement.style.backgroundColor = colors[value];
}

function addFloatLeft() {
  floatCount++;
  const newFloat = document.createElement('div');
  newFloat.className = 'float-box';
  newFloat.textContent = `Float Left ${floatCount}`;
  demoArea.insertBefore(newFloat, testElement);
}

function addFloatRight() {
  floatCount++;
  const newFloat = document.createElement('div');
  newFloat.className = 'float-box float-right';
  newFloat.textContent = `Float Right ${floatCount}`;
  demoArea.insertBefore(newFloat, testElement);
}

function resetDemo() {
  // Eliminar todos los floats excepto los primeros dos
  const floats = document.querySelectorAll('.float-box');
  floats.forEach((float, index) => {
    if (index >= 2) {
      float.remove();
    }
  });
  
  floatCount = 2;
  clearValue.value = 'none';
  updateClear();
}

// Event listeners
clearValue.addEventListener('change', updateClear);

// Inicializar
updateClear();
</script>

</body>
</html>

Resumen

La propiedad clear es esencial para:

Controlar el flujo alrededor de elementos flotantes
Crear layouts con columnas tradicionales
Resolver problemas de colapso de contenedores
Mantener la estructura visual del contenido

Recomendaciones finales:

Usa clear: both cuando necesites que un elemento esté debajo de todos los floats
Implementa clearfix en contenedores padres
Considera alternativas modernas (Flexbox, Grid) para nuevos proyectos
Prueba en múltiples navegadores para asegurar consistencia

¡Domina clear para crear layouts más controlados y predecibles!