Esempio di flottazione CSS

Questa pagina fornisce esempi comuni di浮动.

Griglia / Riquadri a larghezza uguale

Box 1
Box 2
Box 1
Box 2
Box 3

Utilizzando float L'attributo può permettere di浮动 i contenitori di contenuto in modo semplice:

Esempio

* {
  box-sizing: border-box;
}
.box {
  float: left;
  width: 33.33%; /* Tre riquadri (quattro riquadri utilizzano 25%, due riquadri utilizzano 50%, ecc.) */
  padding: 50px; /* Se necessario, aggiungere spazio tra le immagini */
}

Prova a farlo tu stesso

Cos'è box-sizing?

Puoi creare facilmente tre riquadri flottanti in parallelo. Tuttavia, quando aggiungi contenuti per espandere la larghezza di ciascun riquadro (ad esempio, padding o bordi), questo riquadro viene danneggiato. box-sizing L'attributo permette di includere il padding e i bordi nel totale della larghezza (e altezza) del riquadro, assicurando che il padding resti all'interno del riquadro senza rompersi.

Puoi trovare le nostre Box Sizing CSS In questa sezione imparerai di più sull'attributo box-sizing.

Immagini in parallelo

Questo schema di riquadri (The grid of boxes) può anche essere utilizzato per visualizzare immagini in parallelo:

Esempio

.img-container {
  float: left;
  width: 33.33%; /* Tre riquadri (quattro riquadri utilizzano 25%, due riquadri utilizzano 50%, ecc.) */
  padding: 5px; /* Se necessario, aggiungere spazio tra le immagini */
}

Prova a farlo tu stesso

Riquadri a larghezza uguale

Nel esempio precedente, hai imparato come浮动 i riquadri in larghezza uguale. Tuttavia, creare riquadri flottanti con altezza uguale non è facile. Tuttavia, una soluzione rapida è impostare un'altezza fissa, come nell'esempio seguente:

Box 1

Alcuni contenuti, alcuni contenuti, alcuni contenuti

Box 2

Alcuni contenuti, alcuni contenuti, alcuni contenuti

Alcuni contenuti, alcuni contenuti, alcuni contenuti

Alcuni contenuti, alcuni contenuti, alcuni contenuti

Esempio

.box {
  height: 500px;
}

Prova a farlo tu stesso

Ma così si perde la flessibilità. È possibile se si può garantire che ci sia sempre lo stesso numero di contenuti all'interno delle scatole. Ma spesso i contenuti sono diversi. Se provi l'esempio precedente su uno smartphone, vedrai che il contenuto della seconda scatola viene visualizzato all'esterno della scatola. È qui che entra in gioco il CSS3 Flexbox - perché può allungare automaticamente la scatola in modo che sia lunga quanto la più lunga scatola:

Esempio

Creare una casella flessibile utilizzando Flexbox:

Box 1 - Ecco alcuni testi per assicurarti che il contenuto sia veramente alto. Ecco alcuni testi per assicurarti che il contenuto sia veramente alto. Ecco alcuni testi per assicurarti che il contenuto sia veramente alto. Ecco alcuni testi per assicurarti che il contenuto sia veramente alto. Ecco alcuni testi per assicurarti che il contenuto sia veramente alto.
Box 2 - La mia altezza seguirà il box 1.

Prova a farlo tu stesso

L'unica difficoltà del Flexbox è che non funziona nei browser Internet Explorer 10 o precedenti. Puoi trovarlo nei nostri Flexbox CSS Impara di più sul modulo di layout Flexbox nelle sezioni di questo capitolo.

Menu di navigazione

Includere float Utilizzare insieme a elenchi di hyperlink per creare menu orizzontali:

Esempio

Prova a farlo tu stesso

Esempi di layout del Web

Utilizzare float È comune completare l'intera布局 del Web utilizzando proprietà:

Esempio

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}

Prova a farlo tu stesso

Più esempi

Fare flottare a destra dell'immagine con bordi e margini
Fare flottare l'immagine a destra del paragrafo. Aggiungere bordi e margini all'immagine.
Fare flottare l'immagine con il titolo a destra
Fare flottare l'immagine con il titolo a destra.
Fare flottare la prima lettera del paragrafo a sinistra
Fare flottare la prima lettera del paragrafo a sinistra e impostare lo stile di questa lettera.
Creare un sito web utilizzando il flusso
Creare una homepage con una barra di navigazione orizzontale, intestazione, piè di pagina, barra di navigazione laterale sinistra e contenuto principale utilizzando il flusso.

Tutti gli attributi CSS di flusso

Proprietà Descrizione
box-sizing Definire il modo di calcolare la larghezza e l'altezza degli elementi: se devono includere il margine interno e il bordo.
clear Specificare quali elementi possono fluttuare accanto all'elemento da pulire e da quale lato.
float Specificare come l'elemento dovrebbe fluttuare.
overflow Specificare cosa accade se il contenuto overflowa il riquadro dell'elemento.
overflow-x Specificare come gestire i margini sinistri/destra del contenuto quando l'area del contenuto dell'elemento overflowa.
overflow-y Specificare come gestire i margini superiori/inferiori del contenuto quando l'area del contenuto dell'elemento overflowa.