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

Flotació i Neteja de CSS

Següent ►
►

Introducció

En aquest tema, aprendrem sobre les propietats float i clear de CSS, que són fonamentals per crear dissenys de pàgines web. La propietat float permet que un element es mogui a l'esquerra o a la dreta dins del seu contenidor, mentre que la propietat clear s'utilitza per controlar el comportament dels elements següents en relació amb els elements flotants.

Propietat float

Descripció

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

Valors de float

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

Exemple Pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Float</title>
    <style>
        .container {
            width: 600px;
            border: 1px solid #000;
        }
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
        }
        .float-left {
            float: left;
        }
        .float-right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box float-left">Flotació Esquerra</div>
        <div class="box float-right">Flotació Dreta</div>
        <p>Aquest és un paràgraf de text que flueix al voltant dels elements flotants. Pots veure com el text s'ajusta al voltant de les caixes flotants.</p>
    </div>
</body>
</html>

Explicació

  • La classe .float-left aplica float: left; a l'element, movent-lo a l'esquerra del contenidor.
  • La classe .float-right aplica float: right; a l'element, movent-lo a la dreta del contenidor.
  • El text del paràgraf flueix al voltant dels elements flotants.

Propietat clear

Descripció

La propietat clear s'utilitza per evitar que els elements següents es posicionin al costat dels elements flotants. Això és útil per assegurar que els elements següents es col·loquin per sota dels elements flotants.

Valors de clear

  • left: L'element següent no es posicionarà al costat d'un element flotant a l'esquerra.
  • right: L'element següent no es posicionarà al costat d'un element flotant a la dreta.
  • both: L'element següent no es posicionarà al costat de cap element flotant (ni a l'esquerra ni a la dreta).
  • none: Valor per defecte. L'element següent es pot posicionar al costat dels elements flotants.
  • inherit: L'element hereta el valor de clear del seu element pare.

Exemple Pràctic

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemple de Clear</title>
    <style>
        .container {
            width: 600px;
            border: 1px solid #000;
        }
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            float: left;
        }
        .clear-both {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Caixa 1</div>
        <div class="box">Caixa 2</div>
        <div class="clear-both"></div>
        <p>Aquest paràgraf es col·loca per sota de les caixes flotants gràcies a la propietat clear.</p>
    </div>
</body>
</html>

Explicació

  • Les caixes amb la classe .box floten a l'esquerra gràcies a float: left;.
  • L'element amb la classe .clear-both aplica clear: both;, assegurant que el paràgraf següent es col·loqui per sota de les caixes flotants.

Exercicis Pràctics

Exercici 1: Crear una Galeria d'Imatges Flotants

Objectiu: Crear una galeria d'imatges on cada imatge floti a l'esquerra i el text flueixi al seu voltant.

Instruccions:

  1. Crea un contenidor amb diverses imatges.
  2. Aplica la propietat float: left; a cada imatge.
  3. Afegeix un paràgraf de text després de les imatges.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Galeria d'Imatges Flotants</title>
    <style>
        .gallery img {
            float: left;
            margin: 10px;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="gallery">
        <img src="image1.jpg" alt="Imatge 1">
        <img src="image2.jpg" alt="Imatge 2">
        <img src="image3.jpg" alt="Imatge 3">
        <p>Aquest és un text que flueix al voltant de les imatges flotants. Pots veure com el text s'ajusta al voltant de les imatges.</p>
    </div>
</body>
</html>

Exercici 2: Netejar Flotació

Objectiu: Utilitzar la propietat clear per assegurar que un element es col·loqui per sota dels elements flotants.

Instruccions:

  1. Crea un contenidor amb diverses caixes flotants.
  2. Afegeix un element amb la propietat clear: both; després de les caixes.
  3. Afegeix un paràgraf de text després de l'element amb clear.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netejar Flotació</title>
    <style>
        .container {
            width: 600px;
            border: 1px solid #000;
        }
        .box {
            width: 200px;
            height: 100px;
            margin: 10px;
            background-color: lightblue;
            float: left;
        }
        .clear-both {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">Caixa 1</div>
        <div class="box">Caixa 2</div>
        <div class="clear-both"></div>
        <p>Aquest paràgraf es col·loca per sota de les caixes flotants gràcies a la propietat clear.</p>
    </div>
</body>
</html>

Conclusió

En aquest tema, hem après com utilitzar les propietats float i clear per crear dissenys de pàgines web. La propietat float permet que els elements es moguin a l'esquerra o a la dreta dins del seu contenidor, mentre que la propietat clear assegura que els elements següents es col·loquin per sota dels elements flotants. Aquests conceptes són fonamentals per crear dissenys de pàgines web més complexos i atractius.

◄ 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