El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Flotación y Limpieza en CSS

Siguiente ►
►

En este tema, aprenderás sobre las propiedades float y clear en CSS, que son fundamentales para crear diseños de página web. Estas propiedades permiten que los elementos se alineen de manera específica y controlan el flujo del contenido alrededor de los elementos flotantes.

  1. Propiedad float

¿Qué es float?

La propiedad float se utiliza para alinear elementos a la izquierda o a la derecha dentro de su contenedor, permitiendo que el contenido circundante fluya alrededor de ellos.

Valores de float

  • none: Valor por defecto. El elemento no flota.
  • left: El elemento flota a la izquierda.
  • right: El elemento flota a la derecha.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Float</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="box left">Flotando a la izquierda</div>
    <div class="box right">Flotando a la derecha</div>
    <p>Este es un párrafo de texto que debería fluir alrededor de las cajas flotantes.</p>
</body>
</html>

Explicación del Código

  • .box: Define el tamaño y el color de fondo de las cajas.
  • .left: Aplica float: left para que la caja flote a la izquierda.
  • .right: Aplica float: right para que la caja flote a la derecha.
  • El párrafo de texto fluirá alrededor de las cajas flotantes.

  1. Propiedad clear

¿Qué es clear?

La propiedad clear se utiliza para controlar el comportamiento de los elementos que siguen a los elementos flotantes. Específicamente, evita que los elementos se coloquen a los lados de un elemento flotante.

Valores de clear

  • none: Valor por defecto. Permite que los elementos floten a ambos lados.
  • left: No permite que los elementos floten a la izquierda.
  • right: No permite que los elementos floten a la derecha.
  • both: No permite que los elementos floten a ambos lados.

Ejemplo Práctico

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo de Clear</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
        .left {
            float: left;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box left">Flotando a la izquierda</div>
    <div class="box left">Flotando a la izquierda</div>
    <div class="clear"></div>
    <p>Este es un párrafo de texto que no fluirá alrededor de las cajas flotantes.</p>
</body>
</html>

Explicación del Código

  • .clear: Aplica clear: both para que el siguiente elemento no flote a ninguno de los lados de los elementos flotantes anteriores.
  • El párrafo de texto no fluirá alrededor de las cajas flotantes debido a la propiedad clear.

  1. Ejercicio Práctico

Instrucciones

  1. Crea un contenedor con tres cajas dentro.
  2. Haz que la primera caja flote a la izquierda, la segunda a la derecha y la tercera no flote.
  3. Añade un párrafo de texto que fluya alrededor de las cajas flotantes.
  4. Usa la propiedad clear para evitar que el texto fluya alrededor de la tercera caja.

Solución

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio de Float y Clear</title>
    <style>
        .container {
            width: 100%;
            overflow: hidden;
        }
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
        .left {
            float: left;
        }
        .right {
            float: right;
        }
        .clear {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box left">Flotando a la izquierda</div>
        <div class="box right">Flotando a la derecha</div>
        <div class="box clear">No flotante</div>
    </div>
    <p>Este es un párrafo de texto que debería fluir alrededor de las cajas flotantes.</p>
</body>
</html>

Explicación del Código

  • .container: Asegura que el contenedor abarque todos los elementos flotantes.
  • .clear: Aplica clear: both a la tercera caja para que no flote y el texto no fluya alrededor de ella.

Conclusión

En esta lección, aprendiste cómo utilizar las propiedades float y clear en CSS para controlar la disposición de los elementos en una página web. La propiedad float permite que los elementos se alineen a la izquierda o a la derecha, mientras que clear controla el flujo de los elementos que siguen a los elementos flotantes. Con estos conocimientos, puedes crear diseños más complejos y controlados en tus proyectos web.

En el próximo tema, exploraremos cómo crear diseños completos utilizando la propiedad float.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados