Oggi vediamo un attributo molto ricorrente nel codice css, ovvero il float.

Questo attributo permette agli elementi di “flottare” nella pagina, ovvero di galleggiare in mezzo ad altri elementi. Vediamo meglio con un esempio:


1

Come potete vedere, la foto del cagnolino è circondata dal testo, e come se il cane vi “fluttuasse”.

Talvolta il float si comporta in maniera diversa da quanto atteso. In realtà, il suo comportamento è del tutto legittimo perché esistono delle regole precise da applicare.

Vediamo qui sotto tre casi in cui l’altezza degli elementi che stanno vicino al float ne influenza radicalmente il comportamento.


1

  • Caso 1: il testo occupa poco spazio verticale e non raggiunge l’altezza dell’immagine flottante. Quello che accade è che il float sborda uscendo dal bordo dell’elemento contenitore.
  • Caso 2: il testo occupa molto spazio verticale e, apparentemente, il problema non si verifica.
  • Caso 3: Come per il caso 1 abbiamo poco testo, tuttavia il problema è stato risolto aggiungendo un altro attributo css che si chiama overflow e che, come per magia, corregge l’altezza del contenitore.

Nel caso 3, bisogna ricordarsi di applicare la proprietà overflow non all’elemento flottante, ma all’elemento contenitore del float. In altre parole, all’elemento che vogliamo diventi più grande.

E se volessimo che un elemento rimanga solo soletto in una riga? Vediamo qui sotto un altro esempio.


1

Come potete vedere, ci sono tre foto di tre bellissimi cagnolini (tutti con float: left). Affiancati a loro vi è un altro <div>, mentre sotto abbiamo un elemento che non si troverà mai affiancato ai flottanti, anche qualora vi fosse spazio alla loro destra.

Per farlo abbiamo utilizzato l’attributo css clear che ha tre valori principali:

  1. Left: l’elemento non vuole altri elementi flottanti alla sua sinistra, ma potrebbe averne alla sua destra.
  2. Right: al contrario, l’elemento non vuole altri elementi flottanti alla sua destra, ma potrebbe averne alla sua sinistra.
  3. Both: l’elemento non vuole nessun altro elemento flottante né a destra né a sinistra.

Nel nostro esempio abbiamo applicato il valore both, anche se un clear left sarebbe stato sufficiente.




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.