Elementos flotantes

7.1 Propiedad float

Los elementos flotantes utilizando las propiedades float y clear fueron uno de los primeros métodos para crear diseños complejos en el diseño web. Aunque los métodos modernos como Flexbox y Grid suelen ser preferidos, conocer el uso de float y clear sigue siendo importante para trabajar con proyectos antiguos o entender los fundamentos de CSS.

Propiedad float

La propiedad float permite que un elemento "flote" a la izquierda o derecha, rodeado por texto y otros elementos. Esta propiedad es especialmente útil para crear diseños con columnas y que las imágenes sean rodeadas por texto.

Sintaxis:

    
      .element {
        float: left; /* o right */
      }
    
  

Valores de la propiedad float:

• left: el elemento flota a la izquierda, y los elementos siguientes lo rodean por la derecha
• right: el elemento flota a la derecha, y los elementos siguientes lo rodean por la izquierda
• none: valor por defecto, el elemento no flota
• inherit: hereda el valor del elemento padre

Ejemplo de uso de float:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="content">
        <p>This is some content that will wrap around the floated elements. The left floated element will be placed to the left, and the right floated element will be placed to the right.</p>
      </div>
    
  

7.2 Propiedad clear

La propiedad clear se utiliza para controlar el comportamiento de elementos flotantes. Permite prevenir que un elemento sea rodeado por elementos flotantes desde un lado específico.

Sintaxis:

    
      .element {
        clear: left; /* o right */
      }
    
  

Valores de la propiedad clear:

• left: el elemento no será rodeado por la izquierda
• right: el elemento no será rodeado por la derecha
• both: el elemento no será rodeado ni por la izquierda ni por la derecha
• none: valor por defecto, el elemento es rodeado por ambos lados

Ejemplo de uso de clear:

    
      .float-left {
        float: left;
        width: 200px;
        height: 200px;
        background-color: lightblue;
      }

      .float-right {
        float: right;
        width: 200px;
        height: 200px;
        background-color: lightgreen;
      }

      .clear {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
      }

      .content {
        background-color: lightgrey;
        padding: 10px;
      }
    
  

    
      <div class="float-left">Left Float</div>
      <div class="float-right">Right Float</div>
      <div class="clear">Cleared Element</div>
      <div class="content">
        <p>This content will not wrap around the floated elements because of the cleared element above.</p>
      </div>
    
  

Ejemplo de técnica "clearfix":

    
      .container::after {
        content: "";
        display: table;
        clear: both;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
      </div>
    
  

7.3 Pros y contras de usar float

Pros

1. Simplicidad de uso:
   • Facilidad para crear diseños simples usando float
2. Amplio soporte de navegadores:
   • float es soportado por todos los navegadores modernos, incluyendo versiones antiguas
3. Flexibilidad en diseños:
   • Posibilidad de crear diferentes diseños, incluyendo rodear imágenes con texto y crear diseños multicolumna

Contras

1. Dificultad en manejar diseños complejos:
   • float puede causar problemas al crear diseños complejos, especialmente cuando se requiere alineación vertical
2. Problemas con la altura de elementos padres:
   • Los elementos padres pueden "colapsar" si todos sus elementos hijos flotan. Esto requiere usar técnicas como clearfix para solucionar
3. Obsolescencia:
   • Métodos modernos como Flexbox y Grid proporcionan formas más poderosas y flexibles de crear diseños

Ejemplo de creación de diseño usando float y clear

Creación de un diseño de dos columnas usando float y clear.

En este ejemplo se crea un diseño de dos columnas con una barra lateral (.sidebar) y contenido principal (.main). Los elementos .sidebar y .main flotan a la izquierda, y el elemento .footer con clear: both; previene el rodeo.

    
      .container {
        width: 100%;
      }

      .sidebar {
        float: left;
        width: 25%;
        background-color: lightblue;
        padding: 10px;
      }

      .main {
        float: left;
        width: 75%;
        background-color: lightgreen;
        padding: 10px;
      }

      .footer {
        clear: both;
        background-color: lightcoral;
        padding: 10px;
        text-align: center;
      }
    
  

    
      <div class="container">
        <div class="sidebar">Sidebar Content</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer Content</div>
      </div>
    
  

El uso de float y clear sigue siendo una herramienta importante en el arsenal de los desarrolladores web, a pesar de la aparición de métodos más modernos. Entender su funcionamiento ayuda en el mantenimiento y actualización de proyectos antiguos, así como en la creación de diseños simples. Los métodos modernos como Flexbox y Grid suelen ser preferidos para crear diseños complejos y adaptativos, pero el conocimiento de float y clear sigue siendo relevante.