Home esercizi css float

Esercizi Float CSS

Esplora come creare layout a più colonne e gestire il flusso dei contenuti utilizzando la proprietà “float” in CSS. Pratica l’uso del float per organizzare i tuoi elementi in modo armonioso.

Esercizio 1

Crea una pagina HTML con due div all'interno. Usa il CSS per impostare il float di entrambi i div come "left" in modo che si posizionino uno a fianco all'altro.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 1</title>
    <style>
      div {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

Esercizio 2

Crea una pagina HTML con tre div all'interno. Usa il CSS per impostare il float dei primi due div come "left" e "right" rispettivamente, in modo che si posizionino uno a fianco all'altro, mentre il terzo div non viene influenzato dal float.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 2</title>
    <style>
      #left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }

      #right {
        float: right;
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }

      #not-floated {
        width: 100px;
        height: 100px;
        background-color: lightyellow;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="not-floated"></div>
  </body>
</html>

Esercizio 3

Crea una pagina HTML con due div all'interno e un paragrafo successivo. Usa il CSS per impostare il float dei div come "left" e "right" rispettivamente, in modo che il paragrafo si posizioni sotto di essi.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 3</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }

      #left {
        float: left;
        background-color: lightblue;
      }

      #right {
        float: right;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <p>
      Questo paragrafo si posiziona sotto i due div con float "left" e "right".
    </p>
  </body>
</html>

Esercizio 4

Crea una pagina HTML con tre div all'interno. Usa il CSS per impostare il float dei primi due div come "left" in modo che si posizionino uno a fianco all'altro, mentre il terzo div viene posizionato sotto di essi con la proprietà "clear".

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 4</title>
    <style>
      #left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }

      #right {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightyellow;
      }

      #clear {
        clear: both;
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="clear"></div>
  </body>
</html>

Esercizio 5

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 5</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }

      #left {
        float: left;
        background-color: lightblue;
      }

      #right {
        float: right;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <p>
      Questo paragrafo si posiziona tra i due div con float "left" e "right".
    </p>
  </body>
</html>

Esercizio 6

Crea una pagina HTML con quattro div all'interno. Usa il CSS per impostare il float dei primi tre div come "left" in modo che si posizionino uno a fianco all'altro, mentre il quarto div viene posizionato sotto di essi con la proprietà "clear".

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 6</title>
    <style>
      #left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }

      #middle {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }

      #right {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }

      #clear {
        clear: both;
        width: 100px;
        height: 100px;
        background-color: lightyellow;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="middle"></div>
    <div id="right"></div>
    <div id="clear"></div>
  </body>
</html>

Esercizio 7

Crea una pagina HTML con tre div all'interno. Usa il CSS per impostare il float del primo div come "left" e del secondo div come "right", in modo che il terzo div si posizioni tra di essi.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 7</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }

      #left {
        float: left;
        background-color: lightblue;
      }

      #right {
        float: right;
        background-color: lightgreen;
      }

      #middle {
        background-color: lightyellow;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
  </body>
</html>

Esercizio 8

Crea una pagina HTML con due div all'interno. Usa il CSS per impostare il float del primo div come "left" in modo che il secondo div si posizioni accanto ad esso. Utilizza la proprietà "clear" per evitare che altri elementi si posizionino accanto al primo div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 8</title>
    <style>
      #left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }

      #right {
        clear: left;
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
  </body>
</html>

Esercizio 9

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 9</title>
    <style>
      #left {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightpink;
      }

      #right {
        float: left;
        width: 100px;
        height: 100px;
        background-color: lightblue;
      }

      #clear {
        clear: left;
        width: 100px;
        height: 100px;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="clear"></div>
  </body>
</html>

Esercizio 10

Crea una pagina HTML con tre div all'interno. Usa il CSS per impostare il float del primo div come "left" e del secondo div come "right", in modo che il terzo div si posizioni tra di essi. Utilizza la proprietà "clear" per evitare che altri elementi si posizionino accanto al primo e al secondo div.

<!DOCTYPE html>
<html>
  <head>
    <title>Esercizio 10</title>
    <style>
      div {
        width: 100px;
        height: 100px;
      }

      #left {
        float: left;
        background-color: lightyellow;
      }

      #right {
        float: right;
        background-color: lightblue;
      }

      #middle {
        clear: both;
        background-color: lightgreen;
      }
    </style>
  </head>
  <body>
    <div id="left"></div>
    <div id="right"></div>
    <div id="middle"></div>
  </body>
</html>