El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Crear Dissenys amb Flotació

Següent ►
►

En aquest tema, aprendrem com utilitzar la propietat float de CSS per crear dissenys de pàgines web. La flotació és una tècnica clàssica que es va utilitzar àmpliament abans de l'adopció de Flexbox i CSS Grid. Tot i que aquestes noves tècniques són més potents i flexibles, la flotació encara és útil en alguns casos i és important comprendre-la.

  1. Què és la Flotació?

La propietat float permet que un element es mogui a l'esquerra o a la dreta dins del seu contenidor, permetent que el text i altres elements flueixin al seu voltant.

Sintaxi de float

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

Valors de float

  • left: Mou l'element a l'esquerra del seu contenidor.
  • right: Mou l'element a la dreta del seu contenidor.
  • none: Valor per defecte. L'element no flota.
  • inherit: Hereta el valor de float del seu element pare.

  1. Exemple Bàsic de Flotació

HTML

<div class="container">
    <div class="box">Caixa 1</div>
    <div class="box">Caixa 2</div>
    <div class="box">Caixa 3</div>
</div>

CSS

.container {
    width: 100%;
}

.box {
    width: 30%;
    margin: 1%;
    float: left;
    background-color: lightblue;
    text-align: center;
    padding: 20px;
}

Explicació

  • Hem creat un contenidor .container que conté tres elements .box.
  • Cada .box té una amplada del 30% i flota a l'esquerra (float: left), permetent que els elements es col·loquin un al costat de l'altre.

  1. Problema de Contenidors Collapsats

Quan utilitzem float, els contenidors que contenen elements flotants poden col·lapsar, és a dir, no reconeixen l'alçada dels seus elements fills flotants.

Solució: Clearfix

Una tècnica comuna per solucionar aquest problema és utilitzar una classe clearfix.

CSS

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

Aplicació

<div class="container clearfix">
    <div class="box">Caixa 1</div>
    <div class="box">Caixa 2</div>
    <div class="box">Caixa 3</div>
</div>

  1. Crear un Disseny de Dues Columnes

HTML

<div class="container clearfix">
    <div class="main-content">Contingut Principal</div>
    <div class="sidebar">Barra Lateral</div>
</div>

CSS

.container {
    width: 100%;
}

.main-content {
    width: 70%;
    float: left;
    background-color: lightgreen;
    padding: 20px;
}

.sidebar {
    width: 25%;
    float: right;
    background-color: lightcoral;
    padding: 20px;
}

Explicació

  • Hem creat un contenidor .container que conté dos elements: .main-content i .sidebar.
  • El contingut principal flota a l'esquerra (float: left) i ocupa el 70% de l'amplada.
  • La barra lateral flota a la dreta (float: right) i ocupa el 25% de l'amplada.

  1. Exercici Pràctic

Objectiu

Crear un disseny de tres columnes amb una capçalera i un peu de pàgina.

HTML

<div class="container clearfix">
    <div class="header">Capçalera</div>
    <div class="column left">Columna Esquerra</div>
    <div class="column center">Columna Central</div>
    <div class="column right">Columna Dreta</div>
    <div class="footer">Peu de Pàgina</div>
</div>

CSS

.container {
    width: 100%;
}

.header, .footer {
    width: 100%;
    background-color: lightgray;
    text-align: center;
    padding: 20px;
}

.column {
    width: 30%;
    float: left;
    margin: 1%;
    padding: 20px;
}

.left {
    background-color: lightblue;
}

.center {
    background-color: lightgreen;
}

.right {
    background-color: lightcoral;
}

Explicació

  • La capçalera i el peu de pàgina ocupen el 100% de l'amplada del contenidor.
  • Les tres columnes floten a l'esquerra (float: left) i ocupen el 30% de l'amplada, amb un marge del 1% per separar-les.

  1. Resum

En aquesta secció, hem après a utilitzar la propietat float per crear dissenys de pàgines web. Hem vist com flotar elements a l'esquerra i a la dreta, com solucionar el problema dels contenidors col·lapsats amb clearfix, i hem creat dissenys de dues i tres columnes. Tot i que la flotació és una tècnica més antiga, encara és útil en alguns casos i és important comprendre-la.

En el proper tema, explorarem l'índex Z de CSS per controlar l'ordre de superposició dels elements.

◄ Anterior
◄
Següent ►
►

Domini del CSS: De Principiant a Avançat

Mòdul 1: Introducció al CSS

Mòdul 2: Estilització de Text i Fonts

Mòdul 3: Model de Caixa i Disseny

Mòdul 4: Posicionament i Flotació

Mòdul 5: Flexbox

Mòdul 6: CSS Grid

Mòdul 7: Tècniques Avançades de CSS

Mòdul 8: Disseny Responsiu

Mòdul 9: Preprocessadors i Frameworks

Mòdul 10: Millors Pràctiques i Optimització

Mòdul 11: Projecte: Construir un Lloc Web Responsiu

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats