El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

En este tema, aprenderemos cómo utilizar la propiedad float de CSS para crear diseños de página. La flotación es una técnica clásica que permite colocar elementos uno al lado del otro, lo cual es útil para crear columnas y otros tipos de diseños. Aunque Flexbox y CSS Grid han ganado popularidad, entender la flotación sigue siendo importante para mantener y comprender el código legado.

Conceptos Clave

Propiedad float:
- float: left;: Flota el elemento a la izquierda.
- float: right;: Flota el elemento a la derecha.
- float: none;: Valor por defecto, el elemento no flota.
Propiedad clear:
- clear: left;: El elemento no permite elementos flotantes a su izquierda.
- clear: right;: El elemento no permite elementos flotantes a su derecha.
- clear: both;: El elemento no permite elementos flotantes a ambos lados.
Contexto de Formato de Bloque (BFC):
- Un contexto de formato de bloque es una propiedad que ayuda a contener elementos flotantes dentro de un contenedor.

Ejemplo Práctico

Vamos a crear un diseño de dos columnas utilizando la propiedad float.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diseño con Flotación</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="column left">
            <h2>Columna Izquierda</h2>
            <p>Contenido de la columna izquierda.</p>
        </div>
        <div class="column right">
            <h2>Columna Derecha</h2>
            <p>Contenido de la columna derecha.</p>
        </div>
    </div>
</body>
</html>

CSS

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.container {
    width: 100%;
    overflow: hidden; /* Contiene los elementos flotantes */
}

.column {
    width: 45%;
    padding: 10px;
    box-sizing: border-box;
}

.left {
    float: left;
    background-color: #f0f0f0;
}

.right {
    float: right;
    background-color: #e0e0e0;
}

Explicación del Código

HTML:
- Creamos un contenedor <div class="container"> que contiene dos columnas <div class="column left"> y <div class="column right">.
CSS:
- Establecemos un ancho del 45% para cada columna y usamos box-sizing: border-box; para incluir el padding en el ancho total.
- Utilizamos float: left; para la columna izquierda y float: right; para la columna derecha.
- overflow: hidden; en el contenedor .container asegura que los elementos flotantes se contengan dentro del contenedor.

Ejercicio Práctico

Ejercicio

Crea un diseño de tres columnas utilizando la propiedad float. Cada columna debe tener un ancho del 30% y un margen del 5% entre ellas.

Solución

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Diseño de Tres Columnas</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <div class="column left">
            <h2>Columna Izquierda</h2>
            <p>Contenido de la columna izquierda.</p>
        </div>
        <div class="column center">
            <h2>Columna Central</h2>
            <p>Contenido de la columna central.</p>
        </div>
        <div class="column right">
            <h2>Columna Derecha</h2>
            <p>Contenido de la columna derecha.</p>
        </div>
    </div>
</body>
</html>

CSS

/* styles.css */
body {
    font-family: Arial, sans-serif;
}

.container {
    width: 100%;
    overflow: hidden; /* Contiene los elementos flotantes */
}

.column {
    width: 30%;
    margin: 0 5%;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f0f0f0;
}

.left {
    float: left;
}

.center {
    float: left;
}

.right {
    float: left;
}

Explicación del Código

HTML:
- Añadimos una columna central <div class="column center"> al diseño.
CSS:
- Ajustamos el ancho de cada columna al 30% y añadimos un margen del 5% a ambos lados.
- Todas las columnas flotan a la izquierda para alinearse en una fila.

Resumen

En esta lección, hemos aprendido cómo utilizar la propiedad float para crear diseños de página con columnas. Aunque la flotación es una técnica más antigua, sigue siendo útil para comprender y mantener el código existente. En la próxima lección, exploraremos el índice Z en CSS para controlar la superposición de elementos.

Creando Diseños con Flotación

Conceptos Clave

Ejemplo Práctico

HTML

CSS

Explicación del Código

Ejercicio Práctico

Ejercicio

Solución

HTML

CSS

Explicación del Código

Resumen

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