Flusso CSS
- Pagina precedente Posizione assoluta CSS
- Pagina successiva Selettore di elemento CSS
La casella fluttuante può muoversi a sinistra o a destra fino a quando il margine esterno non tocca il margine della casella contenitrice o di un'altra casella fluttuante.
Poiché la casella fluttuante non si trova nel flusso normale del documento, le caselle bloccate nel flusso normale del documento si comportano come se la casella fluttuante non esistesse.
Flusso CSS
Vediamo l'immagine seguente, quando la casella 1 fluttua verso destra, si stacca dal flusso del documento e si muove verso destra fino a quando il margine destro della casella tocca il margine destro della casella contenitrice:
Vediamo ancora l'immagine seguente, quando la casella 1 fluttua verso sinistra, si stacca dal flusso del documento e si muove verso sinistra fino a quando il margine sinistro della casella tocca il margine sinistro della casella contenitrice. Poiché non si trova più nel flusso del documento, non occupa spazio e di fatto copre la casella 2, facendo sì che questa scompaia dalla vista.
Se si sposta verso sinistra tutte e tre le caselle, la casella 1 fluttuerà verso sinistra fino a toccare la casella contenitrice, mentre le altre due caselle fluttueranno verso sinistra fino a toccare la casella fluttuante precedente.
Come mostrato nell'immagine seguente, se la casella contenitrice è troppo stretta per accogliere tre elementi fluttuanti disposti orizzontalmente, altri elementi fluttuanti si muoveranno verso il basso fino a quando non ci sarà spazio sufficiente. Se l'altezza degli elementi fluttuanti è diversa, potrebbero essere bloccati da altri elementi fluttuanti mentre si muovono verso il basso:
Attributo float CSS
Nel CSS, realizziamo il floating degli elementi attraverso la proprietà float.
Per ulteriori informazioni sulla proprietà float, visitare il manuale di riferimento:Attributo float CSS。
Casella riga e pulizia
La casella riga accanto alla casella fluttuante viene accorciata, lasciando spazio alla casella fluttuante e facendo in modo che la casella riga circonda la casella fluttuante.
Di conseguenza, creare una casella fluttuante consente di far circondare il testo dall'immagine:
Per fermare il flusso delle righe intorno alla casella fluttuante, è necessario applicare a questa casella Attributo clear. Il valore dell'attributo clear può essere left, right, both o none, che rappresenta quali lati del riquadro non dovrebbero toccare il riquadro fluttuante.
Per ottenere questo effetto, nel margine superiore dell'elemento da pulireMargine superioreAggiungi sufficiente spazio in modo che il margine superiore dell'elemento scenda verticalmente sotto il riquadro fluttuante:
Questo è uno strumento utile che fa spazio intorno agli elementi fluttuanti.
Facciamo un'analisi più dettagliata della fluttuazione e della pulizia. Supponiamo di voler far fluttuare un'immagine a sinistra di un blocco di testo e di voler far sì che l'immagine e il testo siano contenuti in un altro elemento con sfondo di colore e bordo. Potresti scrivere il seguente codice:
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
In questo caso, si verifica un problema. Poiché l'elemento fluttuante si allontana dal flusso del documento, il div che avvolge l'immagine e il testo non occupa spazio.
Come far sì che l'elemento avvolgente circonda visivamente l'elemento fluttuante? È necessario applicare clear in qualche punto dell'elemento:
Sfortunatamente, si è verificato un nuovo problema, poiché non ci sono elementi esistenti che possano applicare la pulizia, quindi possiamo aggiungere un elemento vuoto e pulirlo.
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>
Questo ci darà l'effetto desiderato, ma è necessario aggiungere codice extra. Spesso ci sono elementi che possono applicare clear, ma a volte è necessario aggiungere tag inutili per il layout.
Ma abbiamo un altro metodo, ovvero fare fluttuare il div del contenitore:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
Questo ci darà l'effetto desiderato. Sfortunatamente, l'elemento successivo sarà influenzato da questo elemento fluttuante. Per risolvere questo problema, alcune persone scelgono di fare fluttuare tutto il layout e poi pulire questi fluttuanti con elementi appropriati e significativi (spesso il piè di pagina del sito) per ridurre o eliminare i tag inutili.
In effetti, tutte le pagine del sito CodeW3C.com utilizzano questa tecnica. Se apri il file CSS che utilizziamo, vedrai che abbiamo pulito il div del piè di pagina e che i tre div sopra il piè di pagina si muovono a sinistra.
Attributo clear CSS
Abbiamo appena discusso in dettaglio il principio di funzionamento della pulizia CSS e l'applicazione dell'attributo clear. Se desideri imparare di più sull'attributo clear, visita il manuale di riferimento:Attributo clear CSS。
Esempio di flusso e pulizia
- Applicazione semplice dell'attributo float
- Fare flottare l'immagine a destra di un paragrafo
- Fare flottare l'immagine con bordi e margini a destra del paragrafo
- Fare flottare l'immagine a destra del paragrafo. Aggiungere bordi e margini all'immagine.
- Immagine con titolo fluttante 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 aggiungere stili a questa lettera.
- Creare un menu orizzontale
- Creare un menu orizzontale utilizzando il flusso浮动 con collegamenti a una colonna.
- Creare una pagina iniziale senza tabella
- Creare una pagina iniziale con intestazione, piè di pagina, elenco laterale e contenuto principale utilizzando il flusso浮动.
- Cancellazione dell'elemento laterale
- Questo esempio dimostra come utilizzare elementi di cancellazione per i flussi laterali.
- Pagina precedente Posizione assoluta CSS
- Pagina successiva Selettore di elemento CSS
