Layout CSS - Flottamento e Pulizia

Layout CSS - Flottamento e Pulizia

CSS float L'attributo determina come l'elemento flotta.

CSS clear L'attributo determina quali elementi possono flottare accanto a un elemento di cancellazione e su quale lato.

Attributo float

float L'attributo viene utilizzato per posizionare e formattare il contenuto, ad esempio per far fluttuare l'immagine verso sinistra fino al testo nel contenitore.

float L'attributo può impostare uno dei seguenti valori:

  • left - L'elemento flotta sul lato sinistro del contenitore
  • right - L'elemento flotta sul lato destro del contenitore
  • none - L'elemento non flotta (verrà visualizzato nella posizione in cui è apparso nel testo). Valore predefinito.
  • inherit - L'elemento eredita il valore float del suo genitore

L'uso più semplice è:float L'attributo può realizzare l'effetto di avvolgimento del testo intorno all'immagine (sul giornale).

Esempio - float: right;

Nell'esempio seguente, l'immagine dovrebbe apparire fluttuante verso destra nel testo:

Ananas

Tutoriale di tecnologie web leader - Tutto gratuito. Su CodeW3C.com puoi trovare tutti i tutorial di costruzione di siti web di cui hai bisogno. Dalla base HTML a CSS, fino a XML, SQL, JS, PHP.

Il nostro manuale di riferimento copre ogni aspetto delle tecnologie web. Inclusi gli standard W3C: HTML, CSS, XML. E altre tecnologie come JavaScript, PHP, SQL.

In CodeW3C.com forniamo migliaia di esempi. Utilizzando il nostro editor online, puoi modificare questi esempi e sperimentare con il codice.

Esempio

img {
  float: right;
}

Prova da solo

Esempio - float: left;

Nell'esempio seguente, l'immagine dovrebbe apparire nel testo:Verso sinistraFlottamento:

Ananas

Tutoriale di tecnologie web leader - Tutto gratuito. Su CodeW3C.com puoi trovare tutti i tutorial di costruzione di siti web di cui hai bisogno. Dalla base HTML a CSS, fino a XML, SQL, JS, PHP.

Il nostro manuale di riferimento copre ogni aspetto delle tecnologie web. Inclusi gli standard W3C: HTML, CSS, XML. E altre tecnologie come JavaScript, PHP, SQL.

In CodeW3C.com forniamo migliaia di esempi. Utilizzando il nostro editor online, puoi modificare questi esempi e sperimentare con il codice.

Esempio

img {
  float: left;
}

Prova da solo

Esempio - No float

Nell'esempio seguente, l'immagine verrà visualizzata nella posizione in cui è appena comparsa nel testo (float: none;):

Ananas Tutoriale di tecnologie web leader - Tutto gratuito. Su CodeW3C.com puoi trovare tutti i tutorial di costruzione di siti web di cui hai bisogno. Dalla base HTML a CSS, fino a XML, SQL, JS, PHP. Il nostro manuale di riferimento copre ogni aspetto delle tecnologie web. Inclusi gli standard W3C: HTML, CSS, XML. E altre tecnologie come JavaScript, PHP, SQL. In CodeW3C.com forniamo migliaia di esempi. Utilizzando il nostro editor online, puoi modificare questi esempi e sperimentare con il codice.

Esempio

img {
  float: none;
}

Prova da solo

Leggi di più

Libri di approfondimento:Flottamento CSS